UPDATE: Update to pkg: import statements

README.md

@@ -13,7 +13,7 @@ npm install @matteusan/sentro --save
 ## Showcase
 #### SCSS Input
 ```scss
-@use '@matteusan/sentro' with (
+@use 'pkg:@matteusan/sentro' with (
   $prefix: 'sdc',
   $context: 'theme'
 );

docs/api/breakpoints.md

@@ -25,7 +25,7 @@ breakpoint-config($map: (), $breakpoints...) {}
 ### Usage
 
 ```scss
-@use 'node_modules/@matteusan/sentro' with ($prefix: 'sdc', $context: 'theme');
+@use 'pkg:@matteusan/sentro' with ($prefix: 'sdc', $context: 'theme');
 
 :root {
   @include sentro.token-config(
@@ -55,7 +55,7 @@ breakpoint-check($query) {}
 ### Usage
 
 ```scss
-@use 'node_modules/@matteusan/sentro' with ($prefix: 'sdc', $context: 'theme');
+@use 'pkg:@matteusan/sentro' with ($prefix: 'sdc', $context: 'theme');
 
 @function tell-me-if-its-a-breakpoint($breakpoint) {
   @if sentro.breakpoint-check($breakpoint) {
@@ -83,7 +83,7 @@ breakpoint-create($key, $value) {}
 ### Usage
 
 ```scss
-@use 'node_modules/@matteusan/sentro' with ($prefix: 'sdc', $context: 'theme');
+@use 'pkg:@matteusan/sentro' with ($prefix: 'sdc', $context: 'theme');
 
 dialog {
   // CSS Styles
@@ -112,7 +112,7 @@ token-get($key) {}
 ### Usage
 
 ```scss
-@use 'node_modules/@matteusan/sentro' with ($prefix: 'sdc', $context: 'theme');
+@use 'pkg:@matteusan/sentro' with ($prefix: 'sdc', $context: 'theme');
 
 dialog {
   // CSS Styles

docs/api/keys.md

@@ -20,7 +20,7 @@ key-bind($key, $value) {}
 ### Usage
 
 ```scss
-@use 'node_modules/@matteusan/sentro' with ($prefix: 'sdc', $context: 'theme');
+@use 'pkg:@matteusan/sentro' with ($prefix: 'sdc', $context: 'theme');
 
 .sdc-card {
   @include sentro.key-bind('card-bg', sentro.token-switch('surface-light'));
@@ -45,7 +45,7 @@ key-create($key, $value) {}
 ### Usage
 
 ```scss
-@use 'node_modules/@matteusan/sentro' with ($prefix: 'sdc', $context: 'theme');
+@use 'pkg:@matteusan/sentro' with ($prefix: 'sdc', $context: 'theme');
 
 .sdc-card {
   background: sentro.key-create('card-bg', sentro.token-switch('surface-light'));
@@ -70,7 +70,7 @@ key-check($query) {}
 ### Usage
 
 ```scss
-@use 'node_modules/@matteusan/sentro' with ($prefix: 'sdc', $context: 'theme');
+@use 'pkg:@matteusan/sentro' with ($prefix: 'sdc', $context: 'theme');
 
 @function tell-me-if-its-a-key($key) {
   @if sentro.key-check($key) {
@@ -98,7 +98,7 @@ key-get($key) {}
 ### Usage
 
 ```scss
-@use 'node_modules/@matteusan/sentro' with ($prefix: 'sdc', $context: 'theme');
+@use 'pkg:@matteusan/sentro' with ($prefix: 'sdc', $context: 'theme');
 
 .sdc-card {
   background: sentro.key-get('card-bg');
@@ -122,7 +122,7 @@ key-get-raw($key) {}
 ### Usage
 
 ```scss
-@use 'node_modules/@matteusan/sentro' with ($prefix: 'sdc', $context: 'theme');
+@use 'pkg:@matteusan/sentro' with ($prefix: 'sdc', $context: 'theme');
 
 .sdc-card {
   background: sentro.key-get-raw('card-bg');

docs/api/settings.md

@@ -22,7 +22,7 @@ It accepts a string. This will be the separator for your tokens. By default, it
 This is specifically useful if your design system specifications call for a different separator for tokens. For example, you want to use `.` instead of `-` for your tokens. You can set it like this:
 
 ```scss
-@use 'node_modules/@matteusan/sentro' with (
+@use 'pkg:@matteusan/sentro' with (
   $prefix: 'sdc',
   $context: 'theme',
   $separator: '.' // uses . instead of - to separate tokens.
@@ -46,7 +46,7 @@ body {
 The scope of this setting is not only exclusive to tokens but also to keys and breakpoints:
 
 ```scss
-@use 'node_modules/@matteusan/sentro' with (
+@use 'pkg:@matteusan/sentro' with (
   $prefix: 'sdc',
   $context: 'theme',
   $separator: '.'
@@ -97,7 +97,7 @@ It accepts a boolean value. This will enable/disable token validation throughout
 Use it upon using the module in the root stylesheet.
 
 ```scss
-@use 'node_modules/@matteusan/sentro' with (
+@use 'pkg:@matteusan/sentro' with (
   $prefix: 'sdc',
   $context: 'theme',
   $token-validation: false
@@ -111,7 +111,7 @@ It accepts a boolean value. This will enable/disable key validation throughout t
 Use it upon using the module in the root stylesheet.
 
 ```scss
-@use 'node_modules/@matteusan/sentro' with (
+@use 'pkg:@matteusan/sentro' with (
   $prefix: 'sdc',
   $context: 'theme',
   $key-validation: false
@@ -122,7 +122,7 @@ Use it upon using the module in the root stylesheet.
 It accepts a character. This will be the default token separator for your entire design system.
 
 ```scss
-@use 'node_modules/@matteusan/sentro' with (
+@use 'pkg:@matteusan/sentro' with (
   $prefix: 'sdc',
   $context: 'theme',
   $default-separator: '.' // uses . instead of - to separate tokens.

docs/api/throw.md

@@ -23,7 +23,7 @@ Throws an error. Must be used within a valid SCSS conditional statement or a val
 ### Usage
 
 ```scss
-@use 'node_modules/@matteusan/sentro' with ($prefix: 'sdc', $context: 'theme');
+@use 'pkg:@matteusan/sentro' with ($prefix: 'sdc', $context: 'theme');
 
 .sdc-card {
   @if sentro.key-check('card-bg') {
@@ -53,7 +53,7 @@ Throws a warning. Must be used within a valid SCSS conditional statement or a va
 ### Usage
 
 ```scss
-@use 'node_modules/@matteusan/sentro' with ($prefix: 'sdc', $context: 'theme');
+@use 'pkg:@matteusan/sentro' with ($prefix: 'sdc', $context: 'theme');
 
 .sdc-card {
   @if sentro.key-check('card-bg') {

docs/api/tokens.md

@@ -25,7 +25,7 @@ token-config($map: (), $tokens...) {}
 ### Usage
 
 ```scss
-@use 'node_modules/@matteusan/sentro' with ($prefix: 'sdc', $context: 'theme');
+@use 'pkg:@matteusan/sentro' with ($prefix: 'sdc', $context: 'theme');
 
 :root {
   @include sentro.token-config(
@@ -57,7 +57,7 @@ token-check($query) {}
 ### Usage
 
 ```scss
-@use 'node_modules/@matteusan/sentro' with ($prefix: 'sdc', $context: 'theme');
+@use 'pkg:@matteusan/sentro' with ($prefix: 'sdc', $context: 'theme');
 
 @function tell-me-if-its-a-token($token) {
   @if sentro.token-check($token) {
@@ -88,7 +88,7 @@ token-create($key, $value) {}
 ### Usage
 
 ```scss
-@use 'node_modules/@matteusan/sentro' with ($prefix: 'sdc', $context: 'theme');
+@use 'pkg:@matteusan/sentro' with ($prefix: 'sdc', $context: 'theme');
 
 :root {
   @include sentro.token-create('brand-color-light', #ff7700);
@@ -114,7 +114,7 @@ token-get($key) {}
 ### Usage
 
 ```scss
-@use 'node_modules/@matteusan/sentro' with ($prefix: 'sdc', $context: 'theme');
+@use 'pkg:@matteusan/sentro' with ($prefix: 'sdc', $context: 'theme');
 
 .my-selector {
   background-color: sentro.token-get('brand-color-light');
@@ -142,7 +142,7 @@ token-get-raw($key) {}
 ### Usage
 
 ```scss
-@use 'node_modules/@matteusan/sentro' with ($prefix: 'sdc', $context: 'theme');
+@use 'pkg:@matteusan/sentro' with ($prefix: 'sdc', $context: 'theme');
 
 .my-selector {
   background-color: rgba(sentro.token-get-raw('brand-color-light'), 70%);
@@ -166,7 +166,7 @@ token-switch($query, $fallback: ()) {}
 ```
 ### Usage
 ```scss
-@use 'node_modules/@matteusan/sentro' with ($prefix: 'sdc', $context: 'theme');
+@use 'pkg:@matteusan/sentro' with ($prefix: 'sdc', $context: 'theme');
 
 $fill: #ff7700 !default;
 
@@ -195,7 +195,7 @@ token-switch-raw($query, $fallback: ()) {}
 ### Usage
 
 ```scss
-@use 'node_modules/@matteusan/sentro' with ($prefix: 'sdc', $context: 'theme');
+@use 'pkg:@matteusan/sentro' with ($prefix: 'sdc', $context: 'theme');
 
 $fill: #ff7700 !default;
 

docs/breakpoints/index.md

@@ -13,7 +13,7 @@ Configure your breakpoints using the `sentro.breakpoint-config()` mixin.
 - For maps, the `default` key is the set non-variant key for the parent key (please see the examples below).
 
 ```scss
-@use 'node_modules/@matteusan/sentro' with ($prefix: 'sdc', $context: 'theme');
+@use 'pkg:@matteusan/sentro' with ($prefix: 'sdc', $context: 'theme');
 
 @include sentro.breakpoint-config(
   $small: 320px,
@@ -26,7 +26,7 @@ Configure your breakpoints using the `sentro.breakpoint-config()` mixin.
 The `breakpoint-config()` mixin also supports map-based token sets using the `$map` parameter.
 
 ```scss
-@use 'node_modules/@matteusan/sentro' with ($prefix: 'sdc', $context: 'theme');
+@use 'pkg:@matteusan/sentro' with ($prefix: 'sdc', $context: 'theme');
 
 $_my-breakpoint-map: (
   small: 320px,
@@ -46,7 +46,7 @@ $_my-breakpoint-map: (
 You can also nest breakpoints within each other.
 
 ```scss
-@use 'node_modules/@matteusan/sentro' with ($prefix: 'sdc', $context: 'theme');
+@use 'pkg:@matteusan/sentro' with ($prefix: 'sdc', $context: 'theme');
 
 $_my-breakpoint-map: (
   mobile: (
@@ -75,7 +75,7 @@ You can use these breakpoints by doing this:
 It also supports both at the same time.
 
 ```scss
-@use 'node_modules/@matteusan/sentro' with ($prefix: 'sdc', $context: 'theme');
+@use 'pkg:@matteusan/sentro' with ($prefix: 'sdc', $context: 'theme');
 
 $_my-breakpoint-map: (
   large: 890px,
@@ -94,7 +94,7 @@ $_my-breakpoint-map: (
 When using the breakpoints in your CSS, you are going to use the `breakpoint-create()` mixin. It takes in a valid breakpoint token you've configured in the `breakpoint-config()` mixin.
 
 ```scss
-@use 'node_modules/@matteusan/sentro' with ($prefix: 'sdc', $context: 'theme');
+@use 'pkg:@matteusan/sentro' with ($prefix: 'sdc', $context: 'theme');
 
 $_my-breakpoint-map: (
   small: 320px,
@@ -119,7 +119,7 @@ When you want a specific type of breakpoint in your CSS, you can use the same mi
 - `$property` refers to what property to watch for. The usual values for this property are `'width'` and `'height'` with the default being `'height'`.
 
 ```scss
-@use 'node_modules/@matteusan/sentro' with ($prefix: 'sdc', $context: 'theme');
+@use 'pkg:@matteusan/sentro' with ($prefix: 'sdc', $context: 'theme');
 
 $_my-breakpoint-map: (
   small: 320px,

docs/getting-started/installation.md

@@ -18,7 +18,7 @@ npm install @matteusan/sentro --save
 In your main SCSS stylesheet, use the `@use` at-rule to use the library.
 
 ```scss
-@use 'node_modules/@matteusan/sentro';
+@use 'pkg:@matteusan/sentro';
 ```
 
 Then configure the **prefix** to be used and the **context** in your design system using the `with ()` sass feature.
@@ -27,7 +27,7 @@ Then configure the **prefix** to be used and the **context** in your design syst
 - **Context** provides an additional unique prefix for your tokens (e.g. `'token'`, `'theme'`, etc.)
 
 ```scss
-@use 'node_modules/@matteusan/sentro' with ($prefix: 'sdc', $context: 'theme');
+@use 'pkg:@matteusan/sentro' with ($prefix: 'sdc', $context: 'theme');
 ```
 
 ### When using it in partials
@@ -37,10 +37,10 @@ requires you to configure the `$prefix` and `$context` once in your main SCSS fi
 
 ```scss
 // main.scss
-@use 'node_modules/@matteusan/sentro' with ($prefix: 'sdc', $context: 'theme');
+@use 'pkg:@matteusan/sentro' with ($prefix: 'sdc', $context: 'theme');
 
 // _partial.scss
-@use 'node_modules/@matteusan/sentro';
+@use 'pkg:@matteusan/sentro';
 ```
 
 The case is different for SCSS files that are not partials and will not get used/imported in the main SCSS file. You
@@ -49,10 +49,10 @@ the main SCSS file.
 
 ```scss
 // main.scss
-@use 'node_modules/@matteusan/sentro' with ($prefix: 'sdc', $context: 'theme');
+@use 'pkg:@matteusan/sentro' with ($prefix: 'sdc', $context: 'theme');
 
 // my-component.scss
-@use 'node_modules/@matteusan/sentro' with ($prefix: 'sdc', $context: 'my-component');
+@use 'pkg:@matteusan/sentro' with ($prefix: 'sdc', $context: 'my-component');
 ```
 
 As seen above, we recommend that the `$context` value is the same as the component name.

docs/index.md

@@ -15,7 +15,7 @@ Sentro is well-equipped for making your design system into a production ready de
 ## Showcase
 #### SCSS Input
 ```scss
-@use '@matteusan/sentro' with (
+@use 'pkg:@matteusan/sentro' with (
   $prefix: 'sdc',
   $context: 'theme'
 );

docs/selector/index.md

@@ -13,7 +13,7 @@ The selector module is a powerful tool for selecting elements in the DOM. It all
 Create a selector using the `sentro.selector-create()` mixin.
 
 ```scss
-@use 'node_modules/@matteusan/sentro' with ($prefix: 'sdc', $context: 'theme');
+@use 'pkg:@matteusan/sentro' with ($prefix: 'sdc', $context: 'theme');
 
 @include sentro.selector-create('.button') {
   // Your styles here
@@ -30,7 +30,7 @@ And it outputs:
 You can nest selectors using the `&` symbol.
 
 ```scss
-@use 'node_modules/@matteusan/sentro' with ($prefix: 'sdc', $context: 'theme');
+@use 'pkg:@matteusan/sentro' with ($prefix: 'sdc', $context: 'theme');
 
 @include sentro.selector-create('.button') {
   // Your base styles here

docs/throw/index.md

@@ -12,7 +12,7 @@ Throwing an error is as simple as calling the `sentro.throw-error()` mixin with
 
 ```scss
 // main.scss
-@use 'node_modules/@matteusan/sentro' with ($prefix: 'sdc', $context: 'theme');
+@use 'pkg:@matteusan/sentro' with ($prefix: 'sdc', $context: 'theme');
 
 @debug sentro.throw-error('This is an error message.', 'main.scss');
 ```
@@ -28,7 +28,7 @@ Throwing a warning is as simple as calling the `sentro.throw-warn()` mixin with
 
 ```scss
 // main.scss
-@use 'node_modules/@matteusan/sentro' with ($prefix: 'sdc', $context: 'theme');
+@use 'pkg:@matteusan/sentro' with ($prefix: 'sdc', $context: 'theme');
 
 @debug sentro.throw-warn('This is a warning message.', 'main.scss');
 ```

docs/tokens/index.md

@@ -17,7 +17,7 @@ Configure your tokens using the `sentro.token-config()` mixin.
 It can be a map with a default value and variants, or a separate variable argument.  For maps, the `default` key is the set non-variant key for the parent key (please see the examples below).
 
 ```scss
-@use 'node_modules/@matteusan/sentro' with ($prefix: 'sdc', $context: 'theme');
+@use 'pkg:@matteusan/sentro' with ($prefix: 'sdc', $context: 'theme');
 
 :root {
   @include sentro.token-config(
@@ -36,7 +36,7 @@ It can be a map with a default value and variants, or a separate variable argume
 The `token-config()` mixin also supports map-based token sets using the `$map` parameter.
 
 ```scss
-@use 'node_modules/@matteusan/sentro' with ($prefix: 'sdc', $context: 'theme');
+@use 'pkg:@matteusan/sentro' with ($prefix: 'sdc', $context: 'theme');
 
 $_my-token-map: (
   'brand-color': (
@@ -63,7 +63,7 @@ $_my-token-map: (
 It also supports both at the same time.
 
 ```scss
-@use 'node_modules/@matteusan/sentro' with ($prefix: 'sdc', $context: 'theme');
+@use 'pkg:@matteusan/sentro' with ($prefix: 'sdc', $context: 'theme');
 
 $_my-token-map: (
   'brand-color': (