@volvo-cars/css 0.54.0 → 0.55.0

package/README.md

@@ -2,587 +2,6 @@
 
 <Moved />
 
-_Questions? Ask in [Slack #design-system-web](https://vcc-consumer-digital.slack.com/archives/C041K092P4P)_
+The CSS library for the Volvo Cars Web Design System.
 
-## Overview
-
-CSS (`@volvo-cars/css`) is the CSS library for the Volvo Cars Web Design System, providing low level styling for components with as little friction as possible. It includes:
-
-- Global styles and resets
-- Design tokens as CSS variables
-- Utility class names to apply design tokens
-- Styles for core components/blocks
-
-It is fully compatible with dark mode and right-to-left languages without any JavaScript runtime or build step.
-
-## Resets and default styles
-
-Base styles and resets are added to any elements within the root class name selector.
-
-- Default margins are removed
-- Border styles default to `0 solid var(--v-color-ornament-primary)`
-- Headings, lists and links are unstyled
-
-See [global.css](https://github.com/volvo-cars/design-system-web/blob/master/packages/css/src/styles/global.css) for all global styles and resets.
-
-To simplify styling of body content and content coming from a CMS, some elements will have default styles applied if they have _no other class name_.
-
-```html live
-<div className="stack-text">
-  <h2>For a better future.</h2>
-  <p>
-    We want to provide you with the <a href="#">freedom to move</a> in a
-    personal, sustainable and safe way.
-  </p>
-  <ul>
-    <li>Learn</li>
-    <li>Shop</li>
-  </ul>
-</div>
-```
-
-As soon as any class is added to the element, default styles no longer apply and they are fully reset, letting you apply your own custom styles without conflict.
-
-```html live
-<div>
-  <h2 class="anything">For a better future.</h2>
-  <p>
-    We want to provide you with the
-    <a class="anything" href="#">freedom to move</a> in a personal, sustainable
-    and safe way.
-  </p>
-  <ul class="navigation">
-    <li>Learn</li>
-    <li>Shop</li>
-  </ul>
-</div>
-```
-
-## Typography
-
-Typography class names use the following naming convention:
-
-`.{category}-{variant}`
-
-**Category** is one of `heading`, `statement`, `title`, `body` and `micro`.
-**Variant** is a name matching the size in pixels or describes the use case (`1-3`, `signature`, etc).
-
-### Headings & Statements
-
-Heading and Statement font sizes are fluid, with a smaller font-size on smaller viewports.
-
-| Class                 | Element | Font                                        |
-| --------------------- | ------- | ------------------------------------------- |
-| `heading-1`           | `h1`    | 32-40 (2rem-2.5rem), Volvo Novum Medium     |
-| `heading-2`           | `h2`    | 24-32 (1.5rem-2rem), Volvo Novum Medium     |
-| `heading-3`           | `h3`    | 24-32 (1.5rem-2rem), Volvo Novum Semi-Light |
-| `statement-3`         |         | 48-56 (3rem-3.5rem), Volvo Novum Medium     |
-| `statement-signature` |         | 40-72 (2.5rem-4.5rem), Volvo Broad          |
-
-Use a suitable semantic heading element and apply the class name matching the desired style.
-
-```html example
-<div className="stack-text">
-  <h1 className="heading-1">Heading 1</h1>
-  <h2 className="heading-2">Heading 2</h2>
-  <h3 className="heading-3">Heading 3</h3>
-</div>
-```
-
-```html example
-<div className="stack-text">
-  <h3 className="statement-3">Statement 3</h3>
-  <h1 className="statement-signature">Statement Signature</h1>
-</div>
-```
-
-To disable the fluid font-size and fix the size, pass the `data-fluid-typography` attribute with values `min` / `max`.
-
-```html live
-<h2 class="heading-2" data-fluid-typography="min">
-  Heading 2 fixed to min size
-</h2>
-```
-
-### Text Styles
-
-| Class      | Element |                                      |
-| ---------- | ------- | ------------------------------------ |
-| `title-24` |         | 24 (1.5rem), Volvo Novum Semi-Light  |
-| `title-20` |         | 20 (1.25rem), Volvo Novum Semi-Light |
-| `body-16`  | `:root` | 16 (1rem), Volvo Novum Semi-Light    |
-| `micro`    | `small` | 12 (0.75rem), Volvo Novum Semi-Light |
-
-```html example
-<div className="stack-16">
-  <p className="title-24">Title 24</p>
-  <p className="title-20">Title 20</p>
-  <p className="body-16">Body 16</p>
-  <p className="micro">Micro</p>
-</div>
-```
-
-### Links
-
-| Class            | Element | Properties                                                                           |
-| ---------------- | ------- | ------------------------------------------------------------------------------------ |
-| `link-inline`    | `a`     | `text-decoration-line: underline;`<br />`color: var(--v-color-foreground-secondary)` |
-| `link-secondary` |         | `color: var(--v-color-foreground-primary)`                                           |
-
-```html example
-<div>
-  <p><a href="#" className="link-inline">Link - inline</a></p>
-  <p><a href="#" className="link-secondary">Link - secondary</a></p>
-</div>
-```
-
-### Lists
-
-Makes `ul` and `ol` display as lists with bullets or numbers.
-
-| Class  | Element | Properties                  |
-| ------ | ------- | --------------------------- |
-| `list` | `ul`    | `list-style-type: disc;`    |
-| `list` | `ol`    | `list-style-type: decimal;` |
-
-```html example
-<div>
-  <ol>
-    <li>List item</li>
-    <li>List item</li>
-  </ol>
-  <ul>
-    <li>List item</li>
-    <li>List item</li>
-  </ul>
-</div>
-```
-
-### Utility classes
-
-| Class         | Element       | Properties         |
-| ------------- | ------------- | ------------------ |
-| `font-medium` | `b`, `strong` | `font-weight: 500` |
-| `font-light`  |               | `font-weight: 300` |
-
-### Migrating from the `vcc-ui` `<Text>` component
-
-| vcc-ui Text                                  | @volvo-cars/css                      |
-| -------------------------------------------- | ------------------------------------ |
-| `<Text variant="yang">`                      | `<h1 class="statement-signature">`   |
-| `<Text variant="peary">`                     | `<h1 class="statement-3">`           |
-| `<Text variant="cook">`                      | `<h1>`, `<p class="heading-1">`      |
-| `<Text variant="ootah" subStyle="emphasis">` | `<h2>`, `<p class="heading-2">`      |
-| `<Text variant="ootah" subStyle="standard">` | `<h3>`, `<p class="heading-3">`      |
-| `<Text variant="hillary">`                   | `<p class="title-20">`               |
-| `<Text>`, `<Text variant="columbus">`        | `<p>`, `<p class="body-16">`         |
-| `<Text variant="kelly">`                     | `<p>`, `<p class="body-16">`         |
-| `<Text variant="bates">`                     | `<small>`, `<p class="micro">`       |
-| `<Text variant="amundsen">`                  | `<p style="font: var(--v-font-14)">` |
-
-**Example change**
-
-```diff
--<Text variant="cook" as="h1">
-+<h1 className="heading-1">
-  {title}
--</Text>
-+</h1>
-```
-
-If you need to change the text style depending for different media queries, use tokens to create a custom style.
-
-```jsx
-import vtokens from '@volvo-cars/css/tokens';
-
-<Block
-  extend={{
-    font: vtokens.font14,
-    fromM: {
-      font: vtokens.font16,
-    },
-  }}
->
-  Text
-</Block>;
-```
-
-## Color
-
-### Text color
-
-| Class                  | Properties                                         |
-| ---------------------- | -------------------------------------------------- |
-| `text-primary`         | `color: var(--v-color-foreground-primary)`         |
-| `text-secondary`       | `color: var(--v-color-foreground-secondary)`       |
-| `text-accent-blue`     | `color: var(--v-color-foreground-accent-blue)`     |
-| `text-always-black`    | `color: var(--v-color-foreground-always-black)`    |
-| `text-always-white`    | `color: var(--v-color-foreground-always-white)`    |
-| `text-feedback-green`  | `color: var(--v-color-foreground-feedback-green)`  |
-| `text-feedback-orange` | `color: var(--v-color-foreground-feedback-orange)` |
-| `text-feedback-red`    | `color: var(--v-color-foreground-feedback-red)`    |
-| `text-inherit`         | `color: inherit`                                   |
-
-```html example
-<div>
-  <p class="text-primary">Text color - primary</p>
-  <p class="text-secondary">Text color - secondary</p>
-  <p class="text-accent-blue">Text color - accent-blue</p>
-  <p class="text-always-black">Text color - always-black</p>
-  <p class="text-always-white">Text color - always-white</p>
-  <p class="text-feedback-green">Text color - feedback-green</p>
-  <p class="text-feedback-red">Text color - feedback-red</p>
-  <p class="text-feedback-orange">Text color - feedback-orange</p>
-  <p class="text-inherit">Text color - inherit</p>
-</div>
-```
-
-### Background color
-
-| Class                        | Properties                                         |
-| ---------------------------- | -------------------------------------------------- |
-| `bg-primary`                 | `color: var(--v-color-background-primary)`         |
-| `bg-secondary`               | `color: var(--v-color-background-secondary)`       |
-| `bg-surface-accent-blue`     | `color: var(--v-color-background-accent-blue)`     |
-| `bg-always-black`            | `color: var(--v-color-background-always-black)`    |
-| `bg-always-white`            | `color: var(--v-color-background-always-white)`    |
-| `bg-surface-feedback-green`  | `color: var(--v-color-background-feedback-green)`  |
-| `bg-surface-feedback-orange` | `color: var(--v-color-background-feedback-orange)` |
-| `bg-surface-feedback-red`    | `color: var(--v-color-background-feedback-red)`    |
-| `bg-inherit`                 | `color: inherit`                                   |
-
-```html example
-<div>
-  <div class="bg-primary">Background color - primary</div>
-  <div class="bg-secondary">Background color - secondary</div>
-  <div class="bg-surface-accent-blue text-always-white">
-    Background color - accent-blue
-  </div>
-  <div class="bg-always-black text-always-white">
-    Background color - always-black
-  </div>
-  <div class="bg-always-white text-always-black">
-    Background color - always-white
-  </div>
-  <div class="bg-surface-feedback-green text-always-white">
-    Background color - feedback-green
-  </div>
-  <div class="bg-surface-feedback-red text-always-white">
-    Background color - feedback-red
-  </div>
-  <div class="bg-surface-feedback-orange text-always-white">
-    Background color - feedback-orange
-  </div>
-  <div class="bg-inherit">Background color - inherit</div>
-</div>
-```
-
-### Dark mode
-
-Light mode is the default color mode of the theme. Use the `data-color-mode` attribute to switch between `dark` and `light` color modes.
-
-```html
-<div class="volvo_v0">
-  <p>Light mode</p>
-  <div data-color-mode="dark">
-    <p>Dark mode</p>
-  </div>
-</div>
-<html class="volvo_v0" data-color-mode="dark">
-  <p>Dark mode</p>
-  <div data-color-mode="light">
-    <p>Light mode</p>
-  </div>
-</div>
-```
-
-## Design Tokens
-
-If you only want the design tokens and not the styles, only these files are required.
-
-```js
-import '@volvo-cars/css/font-face.css';
-import '@volvo-cars/css/tokens.css';
-```
-
-Design token variable names consist of the following parts:
-
-- **Type** is the main token group such as `color`, `font` or `size`. The names helps with namespacing tokens and with tooling: you can get autocomplete for all colors in your editor by typing `--v-color..`. Type is the only required part and all other parts vary depending on the type.
-
-- **Category** is a category from a fixed list of categories per token type. Typical values are `feedback`, `ornament`, `heading`.
-
-- **Property** to apply the token to, such as `background`, `foreground`, `ornament`, `lineheight` or `size`.
-
-- **Variant** distinguishes alternative use cases. These can be abstract such as `primary`, `secondary` or enumerated choices of varying size or color such as `blue`, `green`, `14`.
-
-Depending on the category, the name consists of different parts.
-
-### Typography
-
-Naming scheme: `--v-font-{category}-{variant}-{property}-{modifier}`
-
-- **category** is one of `heading`, `statement`, `title` or none.
-- **variant** distinguishes alternative use cases (`1-4`), size in pixels (`20`, `16`) or literal values (`sans`, `broad`).
-- **property** is one of `size` or `lineheight`. If omitted refers to the `font` shorthand CSS property.
-- **modifier** is a property suffix such as `min` or `max`.
-
-#### Font Family
-
-- `--v-font-sans-family` (Volvo Novum in supported locales as determined by `<html lang>`, otherwise fallback fonts)
-- `--v-font-broad-family`
-
-#### Font Sizes
-
-- `--v-font-{12,14,16}-size`
-- `--v-font-{12,14,16}-lineheight`
-- `--v-font-{12,14,16}` (`font` shorthand with `font-weight: 300`)
-- `--v-font-title-{20,24}-size`
-- `--v-font-title-{20,24}-lineheight`
-- `--v-font-title-{20,24}` (`font` shorthand with `font-weight: 300`)
-- `--v-font-heading-{1-3}-size-min`
-- `--v-font-heading-{1-3}-size-max`
-- `--v-font-heading-{1-3}-size`
-- `--v-font-heading-{1-3}-lineheight`
-- `--v-font-heading-{1-3}`
-- `--v-font-statement-{1-3,signature}-size-min`
-- `--v-font-statement-{1-3,signature}-size-max`
-- `--v-font-statement-{1-3,signature}-size`
-- `--v-font-statement-{1-3,signature}-lineheight`
-- `--v-font-statement-{1-3,signature}`
-
-### Color
-
-- `--v-color-foreground-primary` - Foreground color for primary text and icons.
-- `--v-color-foreground-secondary` - Foreground color for secondary text and icons.
-- `--v-color-foreground-accent-blue` - Foreground color for links and selected states.
-- `--v-color-foreground-feedback-green` - Foreground color to signify positive actions.
-- `--v-color-foreground-feedback-orange` - Foreground color to highlight errors, invalid data and destructive actions for caution.
-- `--v-color-foreground-feedback-red` - Foreground color to highlight errors, invalid data and destructive actions.
-
-- `--v-color-ornament-primary` - Ornamental color to visually group or separate UI elements.
-- `--v-color-background-primary` - The primary background colour.
-- `--v-color-background-secondary` - The secondary background colour.
-- `--v-color-background-accent-blue` - Background color for links and selected states.
-- `--v-color-background-feedback-green` - Background color to signify positive actions.
-- `--v-color-background-feedback-orange` - Background color to highlight errors, invalid data and destructive actions for caution.
-- `--v-color-background-feedback-red` - Background color to highlight errors, invalid data and destructive actions.
-- `--v-color-always-black` - Always black regardless of color mode.
-- `--v-color-always-white` - Always white regardless of color mode.
-
-### Spacing
-
-#### Small spacing
-
-Small spacing is fixed in size for all viewport sizes.
-
-- `--v-space-4` - 0.25rem
-- `--v-space-8` - 0.5rem
-- `--v-space-16` - 1rem
-- `--v-space-24` - 1.5rem
-- `--v-space-32` - 2rem
-- `--v-space-48` - 3rem
-- `--v-space-64` - 4rem
-
-#### Fluid spacing
-
-Fluid spacing grows between the smallest value to the largest depending on the viewport size.
-
-- `--v-space-l` 4rem-6rem
-- `--v-space-m` 3rem-4rem
-- `--v-space-s` 2rem-3rem
-
-## Usage
-
-Include the styles in your application by rendering the `links` in your page `<head>`. The links point to CSS files hosted on a shared volvocars.com CDN. The file names include content based hashes, meaning that when a new version is released any unchanged CSS files will remain in caches in the CDN and browsers.
-
-### SSR / Next.js
-
-In `_document` in a **Next.js** application:
-
-```js
-import { links } from '@volvo-cars/css/links';
-
-<Head>
-  {links().map((link) => (
-    <link key={link.href} {...link} />
-  ))}
-</Head>;
-```
-
-### HTML
-
-The array returned by `links()` stringifies to HTML `<link>` tags, letting you do:
-
-```js
-import { links } from '@volvo-cars/css/links';
-
-const html = `<html><head>${links()}</head><body>...`;
-```
-
-If you don't have a JavaScript backend, the stylesheets from the current release are available below. Note that if you copy paste these you need to manually update the HTML whenever a new version of `@volvo-cars/css` is released.
-
-<CSSLinks />
-
-### Client-side JavaScript
-
-```js
-import { links } from '@volvo-cars/css/links';
-
-const fragment = document.createDocumentFragment();
-for (const link of links()) {
-  fragment.append(Object.assign(document.createElement('link'), link));
-}
-document.head.append(fragment);
-```
-
-If your bundler supports it, you can also import the CSS files directly from the npm package and they will be self-hosted on your domain. _Do not do this if your application is hosted on www.volvocars.com_.
-
-```js
-import '@volvo-cars/css/font-face.css';
-import '@volvo-cars/css/tokens.css';
-import '@volvo-cars/css/styles_all-media.css';
-```
-
-### Filtering
-
-For micro-frontend components you might want to exclude some link tags using the `filter` object passed to `links()`.
-
-```js
-import { links } from '@volvo-cars/css/links';
-
-links({
-  filter: {
-    // Excludes all `<link rel=preload>` tags.
-    preload: false,
-    // Excludes the `font-face.css` / inlined font-face CSS
-    fonts: false,
-    // Excludes `tokens.css`
-    tokens: false,
-  },
-});
-```
-
-## Scoping
-
-The stylesheet is scoped with a parent selector, meaning that it will only affect children of a wrapper with a versioned class name. All element selectors have 0 specificity, meaning that any CSS from the application overrides it regardless of the order of styles. Other selectors have a maximum of 10 (0,1,0) in specificity (20 for pseudo states) and are easily overrideable with class name selectors in application code.
-
-You typically want to apply the root class name to your `<html>` element but you can also apply it to parts of your page.
-
-**Example**
-
-```html
-<style>
-  h1 {
-    font-size: 10px;
-  }
-</style>
-
-<h1>10px</h1>
-<h2>Default browser styles</h2>
-<div class="volvo_v0">
-  <h1>10px</h1>
-  <h1 class="heading-1">Design system styled heading</h1>
-</div>
-```
-
-## Responsive design
-
-Web experiences should be created mobile first, with layouts fluidly adjusting to the viewport using layout techniques such as flexbox, grid, container queries and viewport units.
-
-In some cases this is not possible, and you need to significantly shift the layout at specific viewport sizes. In these cases you can customize the experience for non-mobile users using media queries.
-
-Media query breakpoints are exported as Custom Media Queries, a [draft CSS specification](https://drafts.csswg.org/mediaqueries-5/#custom-mq). They can only be used with a CSS postprocessor such as PostCSS, by importing the breakpoints in each file using them with `@import url('@volvo-cars/css/breakpoints.css')`.
-
-To avoid fragmenting a component's styles across a stylesheet, you may want to keep your component styles in a single place and only change custom properties with different media conditions.
-
-```css
-@import url('@volvo-cars/css/breakpoints.css');
-
-.component {
-  --size: 2rem;
-  width: var(--size);
-  height: var(--size);
-}
-
-@media (--v-from-lg) {
-  .component {
-    --size: 3rem;
-  }
-}
-```
-
-| Name           | Widths               |
-| -------------- | -------------------- |
-| `--v-from-md`  | >= 30rem (480px)     |
-| `--v-from-lg`  | >= 64rem (1024px)    |
-| `--v-from-xl`  | >= 100rem (1600px)   |
-| `--v-until-md` | < 30rem              |
-| `--v-until-lg` | < 64rem              |
-| `--v-until-xl` | < 100rem             |
-| `--v-only-md`  | 30rem&ndash;63.99rem |
-| `--v-only-lg`  | 64rem&ndash;99.99rem |
-| `--v-only-xl`  | >= 100rem            |
-
-### Next.js
-
-In Next.js, run
-
-`yarn add --dev postcss postcss-import postcss-preset-env`
-
-and add the following to `postcss.config.js`
-
-```js
-module.exports = {
-  plugins: {
-    'postcss-import': {
-      resolve: require.resolve,
-    },
-    'postcss-preset-env': {
-      autoprefixer: {
-        flexbox: false,
-      },
-      stage: 3,
-      features: {
-        'custom-properties': false,
-        'custom-media-queries': true,
-      },
-    },
-  },
-};
-```
-
-## TypeScript
-
-As a convenience for TypeScript developers all class names and CSS variables are exported as JavaScript modules with TypeScript interfaces.
-
-```ts
-import vss from '@volvo-cars/css/styles';
-
-console.assert(vss.body16 === 'body-16');
-console.assert(vss.heading1 === 'heading-1');
-
-document.body.classList.add(vss.body14);
-```
-
-```ts
-import vtokens from '@volvo-cars/css/tokens';
-
-console.assert(vtokens.fontHeading1Size === 'var(--v-font-heading-1-size)');
-
-document.body.style.font = vtokens.font16;
-```
-
-### clsx
-
-To merge or apply class names conditionally you can use the `clsx` utility.
-
-```tsx
-import { clsx } from '@volvo-cars/css/utils';
-import vss from '@volvo-cars/css/styles';
-
-<button
-  className={clsx(vss.fontMedium, isActive && vss.textPrimary, 'my-class-name')}
->
-  Button
-</button>;
-```
+[Read the docs](https://developer.volvocars.com/design-system/web/)

package/dist/UNSTABLE_styles.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/UNSTABLE_styles.ts","../src/join.ts","../src/root-class-name.js","../src/to-kebab-case.ts","../src/styles.ts"],"sourcesContent":["import { cssJoin } from './join';\nimport classNames from './styles';\n\ntype BaseStylesChain = {\n  [key in keyof typeof classNames]: Styles;\n};\n\ntype ClsxClassValue = (Parameters<typeof cssJoin>[0] | Styles)[];\n\ntype Styles = BaseStylesChain &\n  string & {\n    with: (...classes: ClsxClassValue) => Styles;\n    toJSON: () => string;\n  };\n\ntype PrivateTarget = Styles & {\n  _classes: Set<string>;\n  _add: (value: string) => void;\n  _lastClassName: string;\n  _proxy?: PrivateTarget;\n};\n\nfunction createTarget(_className = ''): PrivateTarget {\n  const target = {\n    _classes: new Set([_className]),\n    _add(value: string) {\n      target._classes.add(value);\n      target._lastClassName = value;\n    },\n    _lastClassName: _className,\n  } as PrivateTarget;\n\n  target.toString = function () {\n    return [...target._classes].join(' ').trim();\n  };\n  target.toJSON = function () {\n    return [...target._classes].join(' ').trim();\n  };\n\n  return target;\n}\n\nconst chain: Styles = new Proxy(createTarget(), {\n  get: function get(...args): Styles {\n    let [target, key] = args || [];\n\n    if (typeof key === 'symbol') {\n      //@ts-ignore\n      return;\n    }\n\n    if (key === 'toString' || key === 'valueOf' || key === 'toJSON') {\n      return Reflect.get(...args);\n    }\n\n    if (key === 'with') {\n      //@ts-ignore\n      return (...classes: ClsxClassValue) => {\n        const currentTarget = target._proxy\n          ? target\n          : createTargetAndAssignProxy(get);\n\n        const newClasses = cssJoin(currentTarget.toString(), ...classes);\n        for (const newClass of newClasses.split(' ')) {\n          currentTarget._add(newClass);\n        }\n        return currentTarget._proxy;\n      };\n    }\n\n    const className = classNames[key];\n\n    if (target._proxy) {\n      target._add(className);\n      return target._proxy;\n    }\n\n    return createTargetAndAssignProxy(get, className)._proxy as Styles;\n  },\n});\n\nexport default chain;\n\nfunction createTargetAndAssignProxy(get: any, className?: string) {\n  const target = createTarget(className);\n  target._proxy = new Proxy(target, { get });\n  return target;\n}\n","/*\nMIT License\n\nCopyright (c) Luke Edwards <luke.edwards05@gmail.com> (lukeed.com)\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n*/\n\nexport type ClassValue =\n  | ClassArray\n  | ClassDictionary\n  | string\n  | number\n  | null\n  | boolean\n  | undefined;\n\ninterface ClassDictionary {\n  [id: string]: unknown;\n}\n\ninterface ClassArray extends Array<ClassValue> {}\n\nfunction toVal(mix: NonNullable<ClassValue>) {\n  let k: string | number,\n    y: string,\n    str = '';\n\n  if (typeof mix === 'string' || typeof mix === 'number') {\n    str += mix;\n  } else if (mix && typeof mix === 'object' && '_classes' in mix) {\n    str += mix.toString();\n  } else if (typeof mix === 'object') {\n    if (Array.isArray(mix)) {\n      for (k = 0; k < mix.length; k++) {\n        if (mix[k]) {\n          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n          if ((y = toVal(mix[k]!))) {\n            str && (str += ' ');\n            str += y;\n          }\n        }\n      }\n    } else {\n      for (k in mix) {\n        if (mix[k]) {\n          str && (str += ' ');\n          str += k;\n        }\n      }\n    }\n  }\n\n  return str;\n}\n\nexport function cssJoin(...classes: ClassValue[]): string {\n  let i = 0;\n  let tmp: ClassValue;\n  let x: string;\n  let str = '';\n  while (i < classes.length) {\n    if ((tmp = classes[i++])) {\n      if ((x = toVal(tmp))) {\n        str && (str += ' ');\n        str += x;\n      }\n    }\n  }\n  return str;\n}\n","// Bump this version for any backward incompatible changes to the\n// CSS itself, such as if something would break if several versions\n// of the CSS are applied to the same elements.\nexport const cssVersion = 'v0';\n\nexport const rootClassName = `volvo_${cssVersion}`;\n","export function toKebabCase(x: string) {\n  return x\n    .replace(/([0-9])([A-Z])/g, '$1-$2')\n    .replace(/([a-z])([A-Z0-9])/g, '$1-$2')\n    .toLowerCase();\n}\n","import { rootClassName } from './root-class-name';\nimport { toKebabCase } from './to-kebab-case';\n\nexport interface ClassNames {\n  [key: string]: string;\n}\n\nfunction toClassName(key: string) {\n  return toKebabCase(key);\n}\n\nconst vss = new Proxy(Object.create({ root: rootClassName }), {\n  get(target, key: string) {\n    if (key in target) {\n      return target[key];\n    }\n    return toClassName(key);\n  },\n});\n\nexport default vss;\n"],"mappings":"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","names":["UNSTABLE_styles_exports","__export","UNSTABLE_styles_default","__toCommonJS","toVal","mix","k","y","str","cssJoin","classes","i","tmp","x","cssVersion","rootClassName","toKebabCase","x","toClassName","key","toKebabCase","vss","rootClassName","target","styles_default","createTarget","_className","target","value","chain","get","args","key","classes","currentTarget","createTargetAndAssignProxy","newClasses","cssJoin","newClass","className","styles_default","UNSTABLE_styles_default"]}
+{"version":3,"sources":["../src/UNSTABLE_styles.ts","../src/join.ts","../src/root-class-name.js","../src/to-kebab-case.ts","../src/styles.ts"],"sourcesContent":["import { cssJoin } from './join';\nimport classNames from './styles';\n\ntype BaseStylesChain = {\n  [key in keyof typeof classNames]: Styles;\n};\n\ntype ClsxClassValue = (Parameters<typeof cssJoin>[0] | Styles)[];\n\ntype Styles = BaseStylesChain &\n  string & {\n    with: (...classes: ClsxClassValue) => Styles;\n    toJSON: () => string;\n  };\n\ntype PrivateTarget = Styles & {\n  _classes: Set<string>;\n  _add: (value: string) => void;\n  _lastClassName: string;\n  _proxy?: PrivateTarget;\n};\n\nfunction createTarget(_className = ''): PrivateTarget {\n  const target = {\n    _classes: new Set([_className]),\n    _add(value: string) {\n      target._classes.add(value);\n      target._lastClassName = value;\n    },\n    _lastClassName: _className,\n  } as PrivateTarget;\n\n  target.toString = function () {\n    return [...target._classes].join(' ').trim();\n  };\n  target.toJSON = function () {\n    return [...target._classes].join(' ').trim();\n  };\n\n  return target;\n}\n\nconst chain: Styles = new Proxy(createTarget(), {\n  get: function get(...args): Styles {\n    let [target, key] = args || [];\n\n    if (typeof key === 'symbol') {\n      //@ts-ignore\n      return;\n    }\n\n    if (key === 'toString' || key === 'valueOf' || key === 'toJSON') {\n      return Reflect.get(...args);\n    }\n\n    if (key === 'with') {\n      //@ts-ignore\n      return (...classes: ClsxClassValue) => {\n        const currentTarget = target._proxy\n          ? target\n          : createTargetAndAssignProxy(get);\n\n        const newClasses = cssJoin(currentTarget.toString(), ...classes);\n        for (const newClass of newClasses.split(' ')) {\n          currentTarget._add(newClass);\n        }\n        return currentTarget._proxy;\n      };\n    }\n\n    const className = classNames[key];\n\n    if (target._proxy) {\n      target._add(className);\n      return target._proxy;\n    }\n\n    return createTargetAndAssignProxy(get, className)._proxy as Styles;\n  },\n});\n\nexport default chain;\n\nfunction createTargetAndAssignProxy(get: any, className?: string) {\n  const target = createTarget(className);\n  target._proxy = new Proxy(target, { get });\n  return target;\n}\n","/*\nMIT License\n\nCopyright (c) Luke Edwards <luke.edwards05@gmail.com> (lukeed.com)\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n*/\n\nexport type ClassValue =\n  | ClassArray\n  | ClassDictionary\n  | string\n  | number\n  | null\n  | boolean\n  | undefined;\n\ninterface ClassDictionary {\n  [id: string]: unknown;\n}\n\ninterface ClassArray extends Array<ClassValue> {}\n\nfunction toVal(mix: NonNullable<ClassValue>) {\n  let k: string | number,\n    y: string,\n    str = '';\n\n  if (typeof mix === 'string' || typeof mix === 'number') {\n    str += mix;\n  } else if (mix && typeof mix === 'object' && '_classes' in mix) {\n    str += mix.toString();\n  } else if (typeof mix === 'object') {\n    if (Array.isArray(mix)) {\n      for (k = 0; k < mix.length; k++) {\n        if (mix[k]) {\n          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n          if ((y = toVal(mix[k]!))) {\n            str && (str += ' ');\n            str += y;\n          }\n        }\n      }\n    } else {\n      for (k in mix) {\n        if (mix[k]) {\n          str && (str += ' ');\n          str += k;\n        }\n      }\n    }\n  }\n\n  return str;\n}\n\n/**\n * Conditionally join strings of class names together, filtering out falsy values.\n *\n * @example\n * cssJoin('bg-secondary', variant === 'primary' && 'text-primary')\n *\n * @param classes\n */\nexport function cssJoin(...classes: ClassValue[]): string {\n  let i = 0;\n  let tmp: ClassValue;\n  let x: string;\n  let str = '';\n  while (i < classes.length) {\n    if ((tmp = classes[i++])) {\n      if ((x = toVal(tmp))) {\n        str && (str += ' ');\n        str += x;\n      }\n    }\n  }\n  return str;\n}\n","// Bump this version for any backward incompatible changes to the\n// CSS itself, such as if something would break if several versions\n// of the CSS are applied to the same elements.\nexport const cssVersion = 'v0';\n\nexport const rootClassName = `volvo_${cssVersion}`;\n","export function toKebabCase(x: string) {\n  return x\n    .replace(/([0-9])([A-Z])/g, '$1-$2')\n    .replace(/([a-z])([A-Z0-9])/g, '$1-$2')\n    .toLowerCase();\n}\n","import { rootClassName } from './root-class-name';\nimport { toKebabCase } from './to-kebab-case';\n\nexport interface ClassNames {\n  [key: string]: string;\n}\n\nfunction toClassName(key: string) {\n  return toKebabCase(key);\n}\n\nconst vss = new Proxy(Object.create({ root: rootClassName }), {\n  get(target, key: string) {\n    if (key in target) {\n      return target[key];\n    }\n    return toClassName(key);\n  },\n});\n\nexport default vss;\n"],"mappings":"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","names":["UNSTABLE_styles_exports","__export","UNSTABLE_styles_default","__toCommonJS","toVal","mix","k","y","str","cssJoin","classes","i","tmp","x","cssVersion","rootClassName","toKebabCase","x","toClassName","key","toKebabCase","vss","rootClassName","target","styles_default","createTarget","_className","target","value","chain","get","args","key","classes","currentTarget","createTargetAndAssignProxy","newClasses","cssJoin","newClass","className","styles_default","UNSTABLE_styles_default"]}

package/dist/UNSTABLE_styles.js

@@ -1,2 +1,2 @@
-import{a as o}from"./chunk-6XA6KEHH.js";import"./chunk-Q6P47KLU.js";import{a as l}from"./chunk-CAOJ5SMH.js";function y(s=""){let t={_classes:new Set([s]),_add(e){t._classes.add(e),t._lastClassName=e},_lastClassName:s};return t.toString=function(){return[...t._classes].join(" ").trim()},t.toJSON=function(){return[...t._classes].join(" ").trim()},t}var f=new Proxy(y(),{get:function s(...t){let[e,r]=t||[];if(typeof r=="symbol")return;if(r==="toString"||r==="valueOf"||r==="toJSON")return Reflect.get(...t);if(r==="with")return(...c)=>{let a=e._proxy?e:i(s),g=l(a.toString(),...c);for(let u of g.split(" "))a._add(u);return a._proxy};let n=o[r];return e._proxy?(e._add(n),e._proxy):i(s,n)._proxy}}),_=f;function i(s,t){let e=y(t);return e._proxy=new Proxy(e,{get:s}),e}export{_ as default};
+import{a as o}from"./chunk-6XA6KEHH.js";import"./chunk-Q6P47KLU.js";import{a as l}from"./chunk-DCLPPQO6.js";function y(s=""){let t={_classes:new Set([s]),_add(e){t._classes.add(e),t._lastClassName=e},_lastClassName:s};return t.toString=function(){return[...t._classes].join(" ").trim()},t.toJSON=function(){return[...t._classes].join(" ").trim()},t}var f=new Proxy(y(),{get:function s(...t){let[e,r]=t||[];if(typeof r=="symbol")return;if(r==="toString"||r==="valueOf"||r==="toJSON")return Reflect.get(...t);if(r==="with")return(...c)=>{let a=e._proxy?e:i(s),g=l(a.toString(),...c);for(let u of g.split(" "))a._add(u);return a._proxy};let n=o[r];return e._proxy?(e._add(n),e._proxy):i(s,n)._proxy}}),_=f;function i(s,t){let e=y(t);return e._proxy=new Proxy(e,{get:s}),e}export{_ as default};
 //# sourceMappingURL=UNSTABLE_styles.js.map

package/dist/{chunk-CAOJ5SMH.js → chunk-DCLPPQO6.js}

@@ -1,2 +1,2 @@
 function l(e){let n,r,t="";if(typeof e=="string"||typeof e=="number")t+=e;else if(e&&typeof e=="object"&&"_classes"in e)t+=e.toString();else if(typeof e=="object")if(Array.isArray(e))for(n=0;n<e.length;n++)e[n]&&(r=l(e[n]))&&(t&&(t+=" "),t+=r);else for(n in e)e[n]&&(t&&(t+=" "),t+=n);return t}function a(...e){let n=0,r,t,s="";for(;n<e.length;)(r=e[n++])&&(t=l(r))&&(s&&(s+=" "),s+=t);return s}export{a};
-//# sourceMappingURL=chunk-CAOJ5SMH.js.map
+//# sourceMappingURL=chunk-DCLPPQO6.js.map

package/dist/{chunk-CAOJ5SMH.js.map → chunk-DCLPPQO6.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/join.ts"],"sourcesContent":["/*\nMIT License\n\nCopyright (c) Luke Edwards <luke.edwards05@gmail.com> (lukeed.com)\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n*/\n\nexport type ClassValue =\n  | ClassArray\n  | ClassDictionary\n  | string\n  | number\n  | null\n  | boolean\n  | undefined;\n\ninterface ClassDictionary {\n  [id: string]: unknown;\n}\n\ninterface ClassArray extends Array<ClassValue> {}\n\nfunction toVal(mix: NonNullable<ClassValue>) {\n  let k: string | number,\n    y: string,\n    str = '';\n\n  if (typeof mix === 'string' || typeof mix === 'number') {\n    str += mix;\n  } else if (mix && typeof mix === 'object' && '_classes' in mix) {\n    str += mix.toString();\n  } else if (typeof mix === 'object') {\n    if (Array.isArray(mix)) {\n      for (k = 0; k < mix.length; k++) {\n        if (mix[k]) {\n          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n          if ((y = toVal(mix[k]!))) {\n            str && (str += ' ');\n            str += y;\n          }\n        }\n      }\n    } else {\n      for (k in mix) {\n        if (mix[k]) {\n          str && (str += ' ');\n          str += k;\n        }\n      }\n    }\n  }\n\n  return str;\n}\n\nexport function cssJoin(...classes: ClassValue[]): string {\n  let i = 0;\n  let tmp: ClassValue;\n  let x: string;\n  let str = '';\n  while (i < classes.length) {\n    if ((tmp = classes[i++])) {\n      if ((x = toVal(tmp))) {\n        str && (str += ' ');\n        str += x;\n      }\n    }\n  }\n  return str;\n}\n"],"mappings":"AA2BA,SAASA,EAAMC,EAA8B,CAC3C,IAAIC,EACFC,EACAC,EAAM,GAER,GAAI,OAAOH,GAAQ,UAAY,OAAOA,GAAQ,SAC5CG,GAAOH,UACEA,GAAO,OAAOA,GAAQ,UAAY,aAAcA,EACzDG,GAAOH,EAAI,SAAS,UACX,OAAOA,GAAQ,SACxB,GAAI,MAAM,QAAQA,CAAG,EACnB,IAAKC,EAAI,EAAGA,EAAID,EAAI,OAAQC,IACtBD,EAAIC,CAAC,IAEFC,EAAIH,EAAMC,EAAIC,CAAC,CAAE,KACpBE,IAAQA,GAAO,KACfA,GAAOD,OAKb,KAAKD,KAAKD,EACJA,EAAIC,CAAC,IACPE,IAAQA,GAAO,KACfA,GAAOF,GAMf,OAAOE,CACT,CAEO,SAASC,KAAWC,EAA+B,CACxD,IAAIC,EAAI,EACJC,EACAC,EACAL,EAAM,GACV,KAAOG,EAAID,EAAQ,SACZE,EAAMF,EAAQC,GAAG,KACfE,EAAIT,EAAMQ,CAAG,KAChBJ,IAAQA,GAAO,KACfA,GAAOK,GAIb,OAAOL,CACT","names":["toVal","mix","k","y","str","cssJoin","classes","i","tmp","x"]}
+{"version":3,"sources":["../src/join.ts"],"sourcesContent":["/*\nMIT License\n\nCopyright (c) Luke Edwards <luke.edwards05@gmail.com> (lukeed.com)\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n*/\n\nexport type ClassValue =\n  | ClassArray\n  | ClassDictionary\n  | string\n  | number\n  | null\n  | boolean\n  | undefined;\n\ninterface ClassDictionary {\n  [id: string]: unknown;\n}\n\ninterface ClassArray extends Array<ClassValue> {}\n\nfunction toVal(mix: NonNullable<ClassValue>) {\n  let k: string | number,\n    y: string,\n    str = '';\n\n  if (typeof mix === 'string' || typeof mix === 'number') {\n    str += mix;\n  } else if (mix && typeof mix === 'object' && '_classes' in mix) {\n    str += mix.toString();\n  } else if (typeof mix === 'object') {\n    if (Array.isArray(mix)) {\n      for (k = 0; k < mix.length; k++) {\n        if (mix[k]) {\n          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n          if ((y = toVal(mix[k]!))) {\n            str && (str += ' ');\n            str += y;\n          }\n        }\n      }\n    } else {\n      for (k in mix) {\n        if (mix[k]) {\n          str && (str += ' ');\n          str += k;\n        }\n      }\n    }\n  }\n\n  return str;\n}\n\n/**\n * Conditionally join strings of class names together, filtering out falsy values.\n *\n * @example\n * cssJoin('bg-secondary', variant === 'primary' && 'text-primary')\n *\n * @param classes\n */\nexport function cssJoin(...classes: ClassValue[]): string {\n  let i = 0;\n  let tmp: ClassValue;\n  let x: string;\n  let str = '';\n  while (i < classes.length) {\n    if ((tmp = classes[i++])) {\n      if ((x = toVal(tmp))) {\n        str && (str += ' ');\n        str += x;\n      }\n    }\n  }\n  return str;\n}\n"],"mappings":"AA2BA,SAASA,EAAMC,EAA8B,CAC3C,IAAIC,EACFC,EACAC,EAAM,GAER,GAAI,OAAOH,GAAQ,UAAY,OAAOA,GAAQ,SAC5CG,GAAOH,UACEA,GAAO,OAAOA,GAAQ,UAAY,aAAcA,EACzDG,GAAOH,EAAI,SAAS,UACX,OAAOA,GAAQ,SACxB,GAAI,MAAM,QAAQA,CAAG,EACnB,IAAKC,EAAI,EAAGA,EAAID,EAAI,OAAQC,IACtBD,EAAIC,CAAC,IAEFC,EAAIH,EAAMC,EAAIC,CAAC,CAAE,KACpBE,IAAQA,GAAO,KACfA,GAAOD,OAKb,KAAKD,KAAKD,EACJA,EAAIC,CAAC,IACPE,IAAQA,GAAO,KACfA,GAAOF,GAMf,OAAOE,CACT,CAUO,SAASC,KAAWC,EAA+B,CACxD,IAAIC,EAAI,EACJC,EACAC,EACAL,EAAM,GACV,KAAOG,EAAID,EAAQ,SACZE,EAAMF,EAAQC,GAAG,KACfE,EAAIT,EAAMQ,CAAG,KAChBJ,IAAQA,GAAO,KACfA,GAAOK,GAIb,OAAOL,CACT","names":["toVal","mix","k","y","str","cssJoin","classes","i","tmp","x"]}

package/dist/chunk-WU3Y5F3A.js

@@ -0,0 +1,2 @@
+import{a as c}from"./chunk-BBIFT7L4.js";var n={"font-face.css":"css/v0/font-face.05a7ed4c.css","tokens.css":"css/v0/tokens.534178ca.css","styles.css":"css/v0/styles.882b24e1.css","styles_md.css":"css/v0/styles_md.e7fc7f7f.css","styles_xl.css":"css/v0/styles_xl.12709e42.css","styles_hover.css":"css/v0/styles_hover.673bbe51.css"};var i="https://www.volvocars.com/static/shared/pkg/";function f({fonts:s=!0,tokens:e=!0}={}){return([t])=>t==="font-face.css"?s:t.endsWith("tokens.css")?e:!0}function p(s){let e=s.split("_").pop()?.replace(".css","");return c[e]}export{n as a,i as b,f as c,p as d};
+//# sourceMappingURL=chunk-WU3Y5F3A.js.map