@razerspine/pug-ui-kit 1.2.1 → 1.3.0

package/CHANGELOG.md

@@ -1,34 +1,54 @@
-## [1.0.1] - 2026-02-03
+# Changelog
+
+# Changelog
+
+## [1.3.0] - 2026-02-11
+
+### Added
+- **Production CSS build pipeline**
+  - Compiles SCSS into `style/style.css`
+  - Generates minified version `style/style.min.css`
+  - Adds vendor prefixes via PostCSS + Autoprefixer
+- **New build scripts**
+  - `clean`
+  - `build:css`
+  - `build:postcss`
+  - `build` (full pipeline)
+- **Distributable CSS output**
+  - Users can now import compiled CSS directly:
+    ```scss
+    @import "@razerspine/pug-ui-kit/style/style.min.css";
+    ```
 
 ### Changed
-- **dataTable**: Refactored the `dataTable` mixin to improve configuration consistency.
-- **dataTable**: The `options` parameter now accepts an `actions` array to define row actions (links/buttons) dynamically.
+- Migrated SCSS utilities to modern Dart Sass syntax
+  - Replaced deprecated global built-in functions
+  - Removed deprecated `if()` Sass function usage
+  - Updated `map-get` → `map.get`
+- Improved forward-compatibility with Dart Sass 3.0+
 
-### Removed
-- **dataTable**: Removed support for the Pug `block` (slot) content for rendering actions. The `showActions` boolean option has also been removed.
+### Notes
+- No breaking changes.
+- Existing SCSS/LESS usage remains fully supported.
+- CSS build output is optional — advanced users can still consume SCSS/LESS sources directly.
 
-### Migration Guide
-If you were using the block content for actions:
-```pug
-// Old version (v1.0.0)
-+dataTable(items, cols, { showActions: true })
-  a(href=`/edit/${item.id}`) Edit
-```
-You should now update to:
 
-```pug
-// New version (v1.0.1)
-+dataTable(items, cols, {
-  actions: [
-    { label: 'Edit', url: (item) => `/edit/${item.id}` }
-  ]
-})
-```
+## [1.2.2] - 2026-02-08
 
-## [1.1.0] - 2026-02-03
 ### Added
-- **Styles**: Full SCSS and LESS support for all UI components.
-- **Architecture**: Added global settings, grid system, and themes (light/dark).
+- **Build script**: Added a no-op `build` script (`echo "pug-ui-kit: nothing to build"`) to ensure compatibility with monorepo CI pipelines.
+
+### Changed
+- **Documentation**: Expanded `README.md` with full documentation of all available Pug mixins, including usage examples and configuration notes.
+
+### Notes
+- This release does not change runtime behavior.
+- The update ensures smooth CI execution when building all workspace packages together.
+
+## [1.2.1] - 2026-02-03
+
+### Fixed
+- **SCSS Scope**: Fixed "Undefined variable" error in `_fonts.scss` by explicitly importing settings module via `@use`.
 
 ## [1.2.0] - 2026-02-03
 ### Added
@@ -40,7 +60,7 @@ You should now update to:
 - **Assets**: Resolved "Module not found" errors in Webpack by using tilde-prefixed paths (~) for internal asset resolution.
 
 ### Migration Guide (Optional)
-By default, the kit now looks for fonts inside the package. 
+By default, the kit now looks for fonts inside the package.
 If you wish to use a custom font path (e.g., a CDN or a different local folder), override the path variable before importing the kit:
 
 #### SCSS:
@@ -57,7 +77,34 @@ If you wish to use a custom font path (e.g., a CDN or a different local folder),
 @import "@razerspine/pug-ui-kit/less/ui-kit.less";
 ```
 
-## [1.2.1] - 2026-02-03
+## [1.1.0] - 2026-02-03
+### Added
+- **Styles**: Full SCSS and LESS support for all UI components.
+- **Architecture**: Added global settings, grid system, and themes (light/dark).
 
-### Fixed
-- **SCSS Scope**: Fixed "Undefined variable" error in `_fonts.scss` by explicitly importing settings module via `@use`.
+## [1.0.1] - 2026-02-03
+
+### Changed
+- **dataTable**: Refactored the `dataTable` mixin to improve configuration consistency.
+- **dataTable**: The `options` parameter now accepts an `actions` array to define row actions (links/buttons) dynamically.
+
+### Removed
+- **dataTable**: Removed support for the Pug `block` (slot) content for rendering actions. The `showActions` boolean option has also been removed.
+
+### Migration Guide
+If you were using the block content for actions:
+```pug
+// Old version (v1.0.0)
++dataTable(items, cols, { showActions: true })
+  a(href=`/edit/${item.id}`) Edit
+```
+You should now update to:
+
+```pug
+// New version (v1.0.1)
++dataTable(items, cols, {
+  actions: [
+    { label: 'Edit', url: (item) => `/edit/${item.id}` }
+  ]
+})
+```

package/README.md

@@ -11,11 +11,57 @@ This package is automatically included in templates generated via the CLI. To in
 npm install @razerspine/pug-ui-kit
 ```
 
-## 🛠 Webpack Configuration
+## 🎨 Styling Options
 
-### 1. Webpack (Pug Mixins)
+You now have **three ways** to use the styles:
 
-To avoid complex relative paths, use the includePaths provided by the package:
+### 1. Use compiled production CSS (Recommended for simple setups)
+
+Fully prefixed and minified:
+```scss
+@import "@razerspine/pug-ui-kit/style/style.min.css";
+```
+
+Non-minified version:
+```scss
+@import "@razerspine/pug-ui-kit/style/style.css";
+```
+- ✔ Includes vendor prefixes
+- ✔ Cross-browser ready
+- ✔ No Sass setup required
+
+### 2. Use SCSS (Advanced / Customizable)
+
+```scss
+@use "@razerspine/pug-ui-kit/scss/ui-kit" as *;
+```
+
+If overriding settings:
+
+```scss
+@use "@razerspine/pug-ui-kit/scss/settings" with (
+  $font-path: "/my-custom-path/fonts"
+);
+
+@use "@razerspine/pug-ui-kit/scss/ui-kit" as *;
+```
+
+### 3. Use LESS
+
+```less
+@import "@razerspine/pug-ui-kit/less/ui-kit";
+```
+
+Override font path:
+
+```less
+@font-path: "/my-custom-path/fonts";
+@import "@razerspine/pug-ui-kit/less/ui-kit";
+```
+
+## 🛠 Webpack Configuration (Pug Mixins)
+
+To avoid complex relative paths:
 
 ```js
 const uiKit = require('@razerspine/pug-ui-kit');
@@ -31,31 +77,60 @@ module.exports = {
 };
 ```
 
-### 2. Styles (SCSS/LESS)
-The package provides full styling for all components.
-If you only need specific parts (e.g., just variables and the table), you can import them individually.
-
-Note: Always import settings first, as other components depend on them.
-
-#### For SCSS:
-
-```scss
-// In your main.scss
-@use "@razerspine/pug-ui-kit/scss/ui-kit" as *;
-```
-
-#### For LESS:
-
-```less
-// In your main.less
-@import "@razerspine/pug-ui-kit/less/ui-kit";
+Then:
+```pug
+include ~pug-ui-kit/btn.pug
 ```
 
-## 🚀 Usage
+## 🚀 Usage Examples
 
 #### Button
 
 ```pug
+//- Renders a configurable button with optional icon and text. Visual appearance
+//- is primarily controlled by the `variant` and `size` parameters and by CSS
+//- classes applied via `attrs` or global styles.
+//-
+//- NOTE: project migrated to an SVG sprite. The mixin references symbols by id
+//- using <use href="#icon-{iconName}"> (xlink:href kept for legacy browsers).
+//- Ensure your sprite contains <symbol id="icon-{name}"> entries.
+//-
+//- Parameters:
+//-   text        - **String | null** — Visible button text. If `null` or an empty
+//-                 string, the text node is omitted (icon-only button).
+//-                 Default: null
+//-   variant     - **String** — Visual variant modifier appended to `.btn--{variant}`.
+//-                 Common values: 'primary', 'secondary', 'outline', 'text-primary',
+//-                 'text-secondary', 'icon-primary', 'icon-secondary', 'icon-outline', 'icon'.
+//-                 Default: 'primary'
+//-   size        - **String** — Size modifier appended to `.btn--{size}` and used
+//-                 for icon sizing `.icon--{size}`. Common values: 'small', 'medium', 'large'.
+//-                 Default: 'medium'
+//-   attrs       - **Object | null** — Attributes to spread onto the `<button>`
+//-                 element via `&attributes(attrs)`. Use this to pass `type`,
+//-                 `id`, `aria-*`, `data-*`, etc. If `null`, no attributes are spread.
+//-                 If `attrs.class` is present it will be merged with the base classes.
+//-                 Default: { type: 'button' }
+//-   iconName    - **String | null** — Icon name (without prefix). The mixin uses
+//-                 `#icon-{iconName}` in <use> to reference the SVG sprite symbol.
+//-                 If `null`, no icon is rendered.
+//-                 Default: null
+//-
+//- Accessibility notes:
+//-   - If the button has visible text, the SVG is treated as decorative and gets
+//-     `aria-hidden="true"` so screen readers ignore it.
+//-   - If the button is icon-only (text === null or empty), the mixin will set
+//-     `aria-label` on the button if `attrs` does not already provide one. Provide
+//-     a meaningful `aria-label` in `attrs` for icon-only buttons.
+//-
+//- Behavior summary:
+//-   - Computes `hasText` to decide whether to render the text node.
+//-   - Builds base classes and safely merges any `attrs.class` with them.
+//-   - Renders <svg><use href="#icon-{iconName}" xlink:href="#icon-{iconName}"></use></svg>
+//-     when `iconName` is provided.
+//-   - Sets `aria-hidden` on the SVG when text is present; ensures icon-only buttons
+//-     have an accessible label.
+
 include ~pug-ui-kit/btn.pug
 
 +btn('Save', 'primary', 'small', { type: 'submit' })
@@ -64,6 +139,40 @@ include ~pug-ui-kit/btn.pug
 #### Data Table (New in v1.1.0)
 
 ```pug
+//- Renders a flexible table from an array of objects. Columns are derived
+//- from the provided `columns` array or automatically collected from object keys.
+//-
+//- Parameters:
+//-   items       - **Array** — Array of objects to render as rows. Each object
+//-                 represents one row.
+//-                 Default: []
+//-   columns     - **Array | undefined** — Optional ordered list of keys to use
+//-                 as columns. If omitted, unique keys are collected from `items`.
+//-                 Default: auto-collected from items
+//-   options     - **Object | undefined** — Configuration options:
+//-                 - emptyText: **String** — Text shown when no rows; Default: 'No data'.
+//-                 - showIndex: **Boolean** — Render leading index column; Default: false.
+//-                 - formatters: **Object** — Map of column -> function(value) for custom rendering.
+//-                   Example: { createdAt: v => new Date(v).toLocaleDateString() }.
+//-                 - labels: **Object** — Map of column -> header label string.
+//-                   Example: { id: 'ID', user_name: 'Name' }.
+//-                 - actions: **Array** — List of action objects to render in the last column.
+//-                   Replaces the deprecated block/slot mechanism.
+//-                   Structure:
+//-                     [
+//-                       {
+//-                         label: String,              // Text of the link/button
+//-                         url: Function(item),        // Callback returning the URL string based on the row item
+//-                         class: String (optional)    // CSS classes for the link
+//-                       }
+//-                     ]
+//-                   Default: []
+//-
+//- Behavior:
+//-   - Renders a table with Bootstrap-like classes (`table`).
+//-   - If `items` is empty, displays a unified row with `emptyText`.
+//-   - Actions are rendered as `<a>` tags in a separate column if `options.actions` is provided.
+
 include ~pug-ui-kit/data-table.pug
 
 - const data = [{id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}];
@@ -78,12 +187,51 @@ include ~pug-ui-kit/data-table.pug
       url: (item) => `/users/edit/${item.id}` 
     }
   ]
-})
+})]
 ```
 
 #### Form Input
 
 ```pug
+//- Renders a configurable <input> element with optional label and placeholder.
+//- Supports different input types, custom name, value, and placeholder text.
+//-
+//- Parameters:
+//-   type        - **String** — Input type attribute.
+//-                 Example: 'text', 'email', 'password', 'number'.
+//-                 Default: none (required).
+//-   id          - **String** — Unique identifier for the <input> element.
+//-                 Also used by the <label> `for` attribute.
+//-                 Example: 'username', 'email'.
+//-                 Default: none (required).
+//-   label       - **String | null** — Visible label text. If `null` or empty,
+//-                 no label is rendered.
+//-                 Example: 'Name', 'Email address'.
+//-                 Default: null.
+//-   placeholder - **String** — Placeholder text displayed inside the input
+//-                 when empty.
+//-                 Example: 'Enter your name', 'example@mail.com'.
+//-                 Default: ''.
+//-   name        - **String** — Name attribute for form submission.
+//-                 Example: 'username', 'email'.
+//-                 Default: ''.
+//-   value       - **String** — Default value for the input field.
+//-                 Example: 'John Doe', 'test@mail.com'.
+//-                 Default: ''.
+//-
+//- Behavior:
+//-   - The input always has `.form-control` class for styling.
+//-   - The label, if provided, uses `.form-label` class and is linked via `for=id`.
+//-   - The placeholder text is shown until the user types content.
+//-   - The `name` attribute ensures the input value is submitted with the form.
+//-   - The `value` attribute pre-fills the input field if provided.
+//-
+//- Notes about styling and classes:
+//-   - Visual appearance is controlled by `.form-control` and `.form-label`
+//-     styles in your SCSS.
+//-   - To add custom classes or attributes, extend the mixin or wrap it.
+//-   - Ensure `id` is unique to avoid duplicate `for`/`id` collisions.
+
 include ~pug-ui-kit/form-input.pug
 
 +formInput('text', 'name', 'Name', 'Enter your name', 'name')
@@ -92,6 +240,38 @@ include ~pug-ui-kit/form-input.pug
 #### Form Textarea
 
 ```pug
+//- Renders a configurable <textarea> element with optional label and placeholder.
+//- Supports custom name attribute for form submission.
+//-
+//- Parameters:
+//-   id          - **String** — Unique identifier for the <textarea> element.
+//-                 Also used by the <label> `for` attribute.
+//-                 Example: 'message', 'comment'.
+//-                 Default: none (required).
+//-   label       - **String | null** — Visible label text. If `null` or empty,
+//-                 no label is rendered.
+//-                 Example: 'Message', 'Comment'.
+//-                 Default: null.
+//-   placeholder - **String** — Placeholder text displayed inside the textarea
+//-                 when empty.
+//-                 Example: 'Type your message...', 'Enter comment here'.
+//-                 Default: ''.
+//-   name        - **String** — Name attribute for form submission.
+//-                 Example: 'message', 'feedback'.
+//-                 Default: ''.
+//-
+//- Behavior:
+//-   - The textarea always has `.form-textarea` class for styling.
+//-   - The label, if provided, uses `.form-label` class and is linked via `for=id`.
+//-   - The placeholder text is shown until the user types content.
+//-   - The `name` attribute ensures the textarea value is submitted with the form.
+//-
+//- Notes about styling and classes:
+//-   - Visual appearance is controlled by `.form-textarea` and `.form-label`
+//-     styles in your SCSS.
+//-   - To add custom classes or attributes, extend the mixin or wrap it.
+//-   - Ensure `id` is unique to avoid duplicate `for`/`id` collisions.
+
 include ~pug-ui-kit/form-textarea.pug
 
 +formTextarea('message', 'Message', 'Type your message...', 'message')
@@ -100,6 +280,35 @@ include ~pug-ui-kit/form-textarea.pug
 #### Input Checkbox
 
 ```pug
+//- Renders a configurable checkbox with label and optional attributes.
+//-
+//- Summary
+//-   Renders a checkbox input and its label inside a single inline control.
+//-   Uses the project's base input styles so visual appearance is driven by SCSS.
+//-
+//- Parameters
+//-   id        - **String** — Unique id for the <input>. Also used by <label for>.
+//-               Required; example: 'agree'.
+//-   label     - **String** — Visible label text shown next to the checkbox.
+//-               Required; example: 'I agree to terms'.
+//-   name      - **String** — Name attribute for form submission/grouping.
+//-               Optional; default: ''.
+//-   value     - **String** — Value submitted when checked. Optional; default: 'on'.
+//-   checked   - **Boolean** — Whether the checkbox is checked by default.
+//-               Optional; default: false.
+//-
+//- Behavior
+//-   - Wraps input and label in a single inline control element (uses .check-control-label).
+//-   - Input uses base input class (.input-base) so theme styles apply consistently.
+//-   - Label text is rendered in a sibling element (.input-text) and is clickable.
+//-   - If checked is true, the input is rendered with the checked attribute.
+//-   - Any attributes passed via attrs are applied to the <input> (useful for disabled, required, aria-*).
+//-
+//- Styling and accessibility
+//-   - Visual styling is controlled by .input-base, input[type="checkbox"], .check-control-label and .input-text in SCSS.
+//-   - Ensure id is unique to keep label association correct for screen readers.
+//-   - Prefer passing ARIA attributes via attrs for additional accessibility.
+
 include ~pug-ui-kit/input-checkbox.pug
 
 +inputCheckbox('agree', 'I agree to all terms')
@@ -108,6 +317,33 @@ include ~pug-ui-kit/input-checkbox.pug
 #### Input Radio
 
 ```pug
+//- Renders a configurable radio input with label for use in radio groups.
+//-
+//- Summary
+//-   Renders a single radio control paired with a clickable label.
+//-   Intended for groups where multiple radios share the same name.
+//-
+//- Parameters
+//-   id        - **String** — Unique id for the <input>. Also used by <label for>.
+//-               Required; example: 'contact-email'.
+//-   label     - **String** — Visible label text shown next to the radio.
+//-               Required; example: 'Email'.
+//-   name      - **String** — Name attribute to group radios. Required; example: 'contact'.
+//-   value     - **String** — Value submitted when selected. Required; example: 'email'.
+//-   checked   - **Boolean** — Whether this radio is selected by default.
+//-               Optional; default: false.
+//-
+//- Behavior
+//-   - Wraps input and label in a single inline control (.check-control-label).
+//-   - Input uses .input-base so theme styles apply consistently.
+//-   - Radios with the same name are mutually exclusive; only one can be selected.
+//-   - If checked is true, the input is rendered with the checked attribute.
+//-   - Any attrs are applied to the <input> (useful for disabled, required, aria-*).
+//-
+//- Styling and accessibility
+//-   - Visual styling is controlled by .input-base, input[type="radio"], .check-control-label and .input-text in SCSS.
+//-   - Ensure id is unique to keep label association correct for screen readers.
+
 include ~pug-ui-kit/input-radio.pug
 
 .form-group
@@ -120,6 +356,57 @@ include ~pug-ui-kit/input-radio.pug
 #### Single Select
 
 ```pug
+//- Renders a configurable <select> element with label, options, and optional placeholder.
+//- Supports both arrays of strings and arrays of objects with configurable
+//- keys for label and value. Provides ability to set a default selected option.
+//-
+//- Parameters:
+//-   id             - **String** — Unique identifier for the <select> element.
+//-                    Also used as the `name` attribute.
+//-                    Example: 'topic', 'country'.
+//-                    Default: none (required).
+//-   label          - **String | null** — Visible label text. If `null` or empty,
+//-                    no label is rendered.
+//-                    Example: 'Topic', 'Choose country'.
+//-                    Default: null.
+//-   options        - **Array** — Options to render. Can be:
+//-                      - Array of strings: ['Support', 'Feedback', 'Other']
+//-                      - Array of objects: [{value:'support', text:'Support'}, …]
+//-                      - Array of objects with custom keys (see labelKey/valueKey).
+//-                    Default: [].
+//-   labelKey       - **String** — Key name in option objects for display text.
+//-                    Example: 'text', 'label'.
+//-                    Default: 'text'.
+//-   valueKey       - **String** — Key name in option objects for option value.
+//-                    Example: 'value', 'id'.
+//-                    Default: 'value'.
+//-   selectedValue  - **String** — Value of the option that should be selected
+//-                    by default. If empty, no option is preselected.
+//-                    Example: 'feedback', '2'.
+//-                    Default: ''.
+//-   placeholder    - **String** — Text for a placeholder option. Rendered only
+//-                    if `label` is null and `selectedValue` is empty.
+//-                    Example: 'Choose an option', 'Select country'.
+//-                    Default: 'Choose an option'.
+//-
+//- Behavior:
+//-   - If `options` is an array of strings, each string is used as both
+//-     the option value and label.
+//-   - If `options` is an array of objects, the keys defined by `labelKey`
+//-     and `valueKey` are used.
+//-   - The option whose value matches `selectedValue` is rendered with
+//-     the `selected` attribute.
+//-   - If no label is provided and no selectedValue is set, a placeholder
+//-     option is rendered at the top (`disabled selected hidden`).
+//-   - The <select> element always has `.single-select` class for styling.
+//-   - The label, if provided, uses `.form-label` class.
+//-
+//- Notes about styling and classes:
+//-   - Visual appearance is controlled by `.single-select` and `.form-label`
+//-     styles in your SCSS.
+//-   - To add custom classes or attributes, extend the mixin or wrap it.
+//-   - Ensure `id` is unique to avoid duplicate `for`/`id` collisions.
+
 include ~pug-ui-kit/single-select.pug
 
 +singleSelect('topic', 'Topic', [
@@ -133,7 +420,9 @@ include ~pug-ui-kit/single-select.pug
 
 * mixins/ - reusable Pug components. 
 * scss/ - complete SCSS kit (Settings, Components, Themes, Layout). 
-* less/ - complete LESS version for alternative workflows. 
+* less/ - complete LESS version for alternative workflows.
+* style/    → Compiled CSS output (since v1.3.0)
+* fonts/    → Roboto font family
 * index.js - path resolution helper.
 
 ## 🧱 Components Included
@@ -146,5 +435,17 @@ include ~pug-ui-kit/single-select.pug
 * input-radio.pug
 * single-select.pug
 
+## ⚙ Build (for contributors)
+
+```bash
+npm run build
+```
+
+**This will:**
+
+- Compile SCSS
+- Run PostCSS + Autoprefixer
+- Generate minified CSS
+
 ## 📄 License
 This project is licensed under the ISC License.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@razerspine/pug-ui-kit",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "Shared Pug mixins for Webpack Starter templates",
   "keywords": [
     "pug",
@@ -13,24 +13,51 @@
     "fonts",
     "scss",
     "less",
+    "style",
     "index.js",
     "README.md",
     "LICENSE",
     "CHANGELOG.md"
   ],
+  "scripts": {
+    "build:css": "sass scss/ui-kit.scss style/style.css",
+    "build:postcss": "postcss style/style.css --config postcss.config.js --output style/style.min.css",
+    "build": "npm run clean && npm run build:css && npm run build:postcss",
+    "clean": "rm -rf style",
+    "prepublishOnly": "npm run build"
+  },
   "style": "scss/ui-kit.scss",
   "less": "less/ui-kit.less",
+  "exports": {
+    ".": "./index.js",
+    "./style": "./style/style.min.css",
+    "./style/style.css": "./style/style.css",
+    "./style/style.min.css": "./style/style.min.css"
+  },
   "author": "Razerspine",
   "repository": {
     "type": "git",
     "url": "https://github.com/Razerspine/webpack-starter-monorepo",
     "directory": "packages/pug-ui-kit"
   },
+  "homepage": "https://github.com/Razerspine/webpack-starter-monorepo/blob/main/packages/pug-ui-kit#readme",
   "bugs": {
     "url": "https://github.com/Razerspine/webpack-starter-monorepo/issues"
   },
   "license": "ISC",
   "publishConfig": {
     "access": "public"
+  },
+  "browserslist": [
+    ">0.5%",
+    "last 2 versions",
+    "not dead"
+  ],
+  "devDependencies": {
+    "sass": "^1.77.0",
+    "postcss": "^8.4.38",
+    "postcss-cli": "^11.0.0",
+    "autoprefixer": "^10.4.19",
+    "cssnano": "^6.1.2"
   }
 }

package/scss/components/_aside.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 @use '../settings/index' as *;
 
 .aside {
@@ -5,7 +6,7 @@
   display: flex;
   justify-content: flex-start;
   padding: 0 $gutter;
-  @media screen and (min-width: map-get($breakpoints, lg)) {
+  @media screen and (min-width: map.get($breakpoints, lg)) {
     padding: 0;
   }
 }
@@ -16,7 +17,7 @@
   border-radius: $border-radius;
   padding: $gutter;
   width: 100%;
-  @media screen and (min-width: map-get($breakpoints, lg)) {
+  @media screen and (min-width: map.get($breakpoints, lg)) {
     padding: calc($gutter * 2);
   }
 }

package/scss/components/_forms.scss

@@ -1,8 +1,9 @@
+@use "sass:map";
 @use '../settings/index' as *;
 
 .form-group {
   margin-bottom: .75rem;
-  @media screen and (min-width: map-get($breakpoints, lg)) {
+  @media screen and (min-width: map.get($breakpoints, lg)) {
     margin-bottom: 1rem;
   }
 

package/scss/components/_main.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 @use '../settings/index' as *;
 
 .main {
@@ -6,7 +7,7 @@
   justify-content: flex-start;
   padding: 0 $gutter;
   overflow: hidden;
-  @media screen and (min-width: map-get($breakpoints, lg)) {
+  @media screen and (min-width: map.get($breakpoints, lg)) {
     padding: 0;
   }
 
@@ -17,7 +18,7 @@
     width: 100%;
     min-height: 100%;
     padding: $gutter;
-    @media screen and (min-width: map-get($breakpoints, lg)) {
+    @media screen and (min-width: map.get($breakpoints, lg)) {
       padding: calc($gutter * 2);
     }
   }