@pnx-mixtape/mxds 0.0.22 → 0.0.24

package/.storybook/decorators.ts

@@ -0,0 +1,7 @@
+/* eslint-disable @typescript-eslint/no-base-to-string, @typescript-eslint/restrict-template-expressions */
+import { Decorator } from "@storybook/html-vite"
+
+export const Page: Decorator = (story, { globals }) => {
+  const { background } = globals
+  return `<div class="mx-page ${background}">${story()}</div>`
+}

package/.storybook/main.ts

@@ -0,0 +1,21 @@
+import { StorybookConfig } from "@storybook/html-vite"
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.ts", "../mockups/*.stories.ts"],
+  staticDirs: ["./public"],
+  addons: ["@storybook/addon-a11y", "@storybook/addon-docs"],
+  framework: "@storybook/html-vite",
+  refs: (config, { configType }) => {
+    if (configType === "DEVELOPMENT") {
+      return {}
+    }
+    return {
+      react: {
+        title: "React components",
+        url: `./react`,
+      },
+    }
+  },
+}
+
+export default config

package/.storybook/manager.ts

@@ -0,0 +1,6 @@
+import { addons } from "storybook/manager-api"
+import theme from "./src/theme"
+
+addons.setConfig({
+  theme,
+})

package/.storybook/preview.ts

@@ -0,0 +1,60 @@
+import { Preview } from "@storybook/html-vite"
+import "./storybook.css"
+import "../src/_custom-media.css"
+import "../src/constants.css"
+import "../src/Atom/base.css"
+import "../src/Utility/utilities.css"
+import "../src/Layout/Section/section.css"
+import "../src/Layout/Grid/grid.css"
+import "../src/Layout/Page/page.css"
+import "../src/Atom/Icon/icon.css"
+import "../src/Atom/Button/button.css"
+import "../src/Form/form.css"
+import "../src/Component/Navigation/navigation.css"
+import "./theme-demo.css"
+import { Page } from "./decorators"
+
+const preview: Preview = {
+  decorators: [Page],
+  parameters: {
+    a11y: {
+      options: {
+        runOnly: {
+          type: "tag",
+          values: ["wcag2a", "wcag2aa"],
+        },
+        resultTypes: ["violations"],
+      },
+    },
+    options: {
+      storySort: {
+        method: "alphabetical",
+        order: ["Introduction", "Base", "Atom", "Layout", "Form", "Component", "*"],
+      },
+    },
+    useBg: false,
+  },
+  globalTypes: {
+    background: {
+      description: "Global theme for components",
+      toolbar: {
+        title: "Theme",
+        dynamicTitle: true,
+        icon: "circlehollow",
+        items: [
+          "default",
+          "mx-background--reverse",
+          "mx-background--alt",
+          "mx-background--primary",
+          "mx-background--accent",
+          "theme--demo",
+        ],
+      },
+    },
+  },
+  initialGlobals: {
+    background: "default",
+  },
+}
+
+export default preview

package/.storybook/public/demo-logo.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="204" height="41" viewBox="0 0 204 41" aria-labelledby="logo-title" role="img">
+    <title id="logo-title">Previous Next</title>
+    <g fill="none" fill-rule="evenodd"><path fill="#32C2DA" stroke="#000" stroke-width="2" d="M118.8651 8h83.2573l-3.7025 32h-82.5167l2.962-32Z"></path><path fill="#000" fill-rule="nonzero" d="M138.4144 18.0004h1.7836c.178 0 .277.0863.2503.2744l-1.6758 11.485c-.0267.1727-.1257.2398-.286.2398h-2.2663c-.1415 0-.2503-.0518-.3027-.2053l-2.4435-7.8076-1.1505 7.773c-.0268.1728-.1257.24-.287.24h-1.7826c-.178 0-.277-.0855-.2493-.2736l1.6778-11.4858c.0247-.1708.1247-.24.284-.24h2.2653c.1425 0 .2493.0519.3047.2064l2.4416 7.8162 1.1515-7.7826c.0267-.1708.1246-.24.2859-.24m11.1272 10.0618-.2413 1.6967c-.0178.1727-.1247.2399-.285.2399h-7.6866c-.18 0-.269-.0845-.2502-.2726l1.6768-11.4858c.0158-.1708.1246-.24.2849-.24h7.6708c.177 0 .267.0864.2473.2745l-.2384 1.6967c-.0198.1717-.1257.2399-.286.2399h-5.3519l-.374 2.5286h4.8693c.178 0 .267.1036.2502.2745l-.268 1.6966c-.0179.1708-.1247.2399-.286.2399h-4.9047l-.4017 2.8386h5.3243c.178 0 .268.0844.2502.2725m12.715-9.7537-4.05 5.7089 2.4702 5.6906c.0732.1727-.0158.2917-.2127.2917h-2.1665c-.1418.0067-.2717-.0763-.3215-.2053l-1.4621-3.3856-2.4455 3.4355c-.0712.1046-.1958.1554-.3373.1554h-2.2753c-.2127 0-.285-.1372-.1593-.308l4.1282-5.803-2.4267-5.5965c-.0692-.1727.0198-.2917.2157-.2917h2.1487c.1418-.0067.2718.0763.3215.2053l1.4344 3.3012 2.3822-3.351c.0712-.1047.1959-.1555.3393-.1555h2.2575c.2127 0 .284.12.1583.308m10.7365-.0326-.2503 1.6957c-.0178.1727-.1246.2399-.2839.2399h-2.9708l-1.4008 9.5483c-.0178.1708-.1246.24-.2839.24h-2.0705c-.178 0-.2671-.0845-.2493-.2736l1.3919-9.5157h-2.954c-.177 0-.267-.0844-.2502-.2725l.2423-1.6967c.0168-.1727.1237-.2399.286-.2399h8.5432c.1781 0 .286.0854.2503.2745M183.7213 18.0806c-.116-.1075-.2725-.1075-.3894 0l-1.2433 1.1502c-.117.1113-.117.2539 0 .3613l4.5738 4.238c.1006.0931.1006.2452 0 .3394l-4.5738 4.237c-.117.1074-.119.2529-.001.3612l1.2443 1.1503c.1159.1093.2735.1093.3894 0l6.2014-5.7419a.2387.2387 0 0 0 0-.3517l-6.2014-5.7438Z"></path><path fill="#FFF" stroke="#000" stroke-width="2" d="M6.1245 1h119.0177l-4.2667 32H1.8578L6.1245 1Z"></path><path fill="#000" fill-rule="nonzero" d="M36.6468 14.2448c0-.8607-.4756-.945-1.56-.945h-2.0646l-.5203 3.4264h1.947c1.7133 0 2.1979-.8775 2.1979-2.4823m2.5022-.213c0 3.2753-1.4446 4.832-4.915 4.832h-2.0545l-.5651 3.6571c-.0279.1557-.1254.2317-.2885.2317h-2.0794c-.1791 0-.2687-.0908-.2418-.265L30.69 11.3975c.0269-.1575.1254-.2316.2875-.2316h4.324c2.8873 0 3.8474 1.0173 3.8474 2.864m4.2136 2.6963h1.947c1.7113 0 2.1968-.8775 2.1968-2.4832 0-.859-.4775-.9414-1.56-.9414h-2.0645l-.5203 3.4246h.001Zm5.6233 5.7262c.0886.1825.0358.2993-.179.2993h-2.0287c-.1433 0-.2687-.05-.3214-.1668l-1.758-3.722h-1.6606l-.5651 3.6562c-.0269.1575-.1254.2317-.2876.2317h-2.0794c-.18 0-.2686-.0909-.2427-.2641l1.6854-11.0883c.0279-.1593.1254-.2316.2875-.2316h4.324c2.8883 0 3.8474 1.0164 3.8474 2.863 0 2.5407-.8696 4.0464-2.8783 4.6005l1.8565 3.823v-.0009Zm10.4458-1.5715-.2408 1.6382c-.0199.1668-.1253.2317-.2885.2317h-7.7306c-.1811 0-.2687-.0834-.2517-.265l1.6874-11.0883c.0169-.165.1243-.2316.2855-.2316h7.7147c.179 0 .2686.0833.2507.264l-.2417 1.6391c-.018.1659-.1254.2317-.2876.2317h-5.3826l-.376 2.4415h4.897c.181 0 .2706.0991.2517.265l-.2686 1.6382c-.0189.1649-.1254.2316-.2885.2316h-4.9329l-.404 2.739h5.3558c.18 0 .2706.0833.2507.265m10.807-9.7151h2.1271c.196 0 .2766.1158.207.29l-4.72 11.1058c-.0537.1325-.1522.191-.3054.191H64.256c-.1592 0-.2507-.0844-.2686-.2317L62.6334 11.43c-.02-.1743.0716-.2641.2517-.2641h2.0894c.1611 0 .2785.0898.2875.2409l.8338 8.8367h.2964l3.544-8.8784c.0527-.1409.1512-.1992.3034-.1992m11.981 2.1338h-2.7271l-1.1203 7.3162h2.6814c.179 0 .2865.0834.2517.265l-.2428 1.64c-.0179.165-.1254.2317-.2885.2317H72.72c-.179 0-.2686-.0843-.2517-.2668l.2447-1.6382c.016-.164.1254-.2317.2866-.2317h2.744l1.1213-7.3152h-2.6993c-.179 0-.2676-.0834-.2507-.2641l.2418-1.6391c.0179-.1659.1263-.2316.2875-.2316h8.055c.179 0 .2855.0833.2517.265l-.2437 1.6381c-.017.165-.1264.2317-.2856.2317m4.2553 3.2772-.1522.9757c-.4209 2.7556.0358 3.1207 1.4626 3.1207 1.562 0 2.2515-.4976 2.6733-3.2522l.1433-.9767c.4308-2.7556-.0288-3.1188-1.4625-3.1188-1.5521 0-2.2516.4957-2.6645 3.2523m6.6462-.0176-.1513.9923c-.6367 4.1881-2.0097 5.4455-5.301 5.4455-3.4076 0-4.504-1.3982-3.8583-5.578l.1443-1.0007C84.6035 12.2574 85.9834 11 89.2578 11c3.4195 0 4.502 1.3991 3.8653 5.5613m11.4705-5.1314-1.0775 7.0512C103.0336 21.5925 101.4367 23 98.5385 23c-3.0047 0-4.314-1.5474-3.8295-4.6588l1.0586-6.9428c.017-.1668.1264-.2316.2865-.2316h2.0814c.1791 0 .2687.0815.2518.2631l-1.0766 7.0512c-.2169 1.3991.1433 2.2015 1.3352 2.2015 1.372 0 2.0466-.9432 2.2685-2.3414l1.0596-6.9428c.0199-.1668.1263-.2316.2875-.2316h2.0804c.1791 0 .2687.0815.2517.2631m9.9812 7.7304c0 2.6305-2.0446 3.8054-5.1836 3.8054-2.951 0-4.4334-.9673-4.2444-3.0113.0279-.1826.1343-.2641.2985-.2641h1.8446c.1622 0 .2517.1306.2786.3215.0557.4466.7362.795 1.957.795 1.757 0 2.4824-.505 2.4824-1.5307 0-.7533-.4378-1.0516-1.9282-1.3657-2.1063-.4467-3.9638-1.1416-3.9638-3.2032 0-2.4239 1.8386-3.6738 4.6831-3.6738 2.7898 0 4.2683.9024 4.1986 2.9048-.0189.2233-.2159.3057-.4327.3057h-1.5422c-.2428 0-.386-.1316-.4477-.3224-.1701-.4883-.8178-.7283-1.8128-.7283-1.4794 0-2.1351.5133-2.1351 1.4065 0 .6375.2448 1.0007 1.553 1.2833 2.2049.4633 4.3947 1.0748 4.3947 3.2773M18.2788 11.0815c.116-.1074.2735-.1093.3894-.0019l1.2423 1.1531c.118.1084.118.2529 0 .3613l-4.5718 4.2369c-.1006.0931-.1006.2452 0 .3393l4.5718 4.237c.118.1074.12.2519.002.3612l-1.2443 1.1502a.2696.2696 0 0 1-.1947.0814.2696.2696 0 0 1-.1947-.0814l-6.2015-5.7417a.2386.2386 0 0 1 0-.3517l6.2015-5.7437ZM121.5701 33.9996 117 39l-1-6z"></path></g>
+</svg>

package/.storybook/public/design-system.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="505" height="328"><linearGradient id="a" x1="17.264%" x2="89.541%" y1="32.713%" y2="64.759%"><stop offset="0" stop-color="#f100ff"></stop><stop offset="1" stop-color="#32c2da"></stop></linearGradient><mask id="b" fill="#fff"><path fill-rule="evenodd" d="M0 328h406V0H0z"></path></mask><g fill="none" fill-rule="evenodd"><path fill="url(#a)" fill-opacity=".2" fill-rule="nonzero" d="M329.54 4c-14.127.061-30.914 9.259-58.134 27.226C184.994 88.268 14.816 30.655 2.372 95.4-24.354 234.437 181.99 319.923 258.934 320h.335c81.699-.062 108.438-53.5 176.053-69.52 73.763-17.48 84.236-100.606 53.45-147.951-27.863-42.846-47.822-42.256-65.994-41.667-13.203.43-25.464.857-39.126-15.375-23.4-27.8-36.677-41.41-53.823-41.487h-.29z"></path><g stroke="#fff" stroke-width="2"><path d="M351 300c0 8.284-6.716 15-15 15s-15-6.716-15-15 6.716-15 15-15 15 6.716 15 15z"></path><path d="M429.96 327h-95.919C319.719 327 308 315.3 308 301s11.719-26 26.041-26h95.92C444.282 275 456 286.7 456 301s-11.717 26-26.04 26z"></path><g stroke-linecap="round" stroke-linejoin="round"><path d="M256 250h148V128H256z" mask="url(#b)" transform="translate(52)"></path><path d="M315.764 154 292 196h47z" mask="url(#b)" transform="translate(52)"></path><path d="M367 196c0 14.911-12.088 27-27 27s-27-12.089-27-27 12.088-27 27-27 27 12.089 27 27zM2 13l184 184H2zm166 165.69L150.74 196m.9-33.722L118.015 196m17.257-50.128L85.285 196m33.627-66.538L52.558 196m49.986-82.948L19.83 196m66.355-99.358L2 181.07M69.824 80.23 2 148.248M53.456 63.82 2 115.428M37.097 47.41 2 82.611M20.73 31 2 49.79m183.331-33.123c20.892 20.89 20.892 54.774 0 75.664-20.888 20.892-54.776 20.892-75.665 0-20.888-20.89-20.888-54.773 0-75.664 19.26-19.258 49.56-20.762 70.542-4.512" mask="url(#b)" transform="translate(52)"></path><path d="m185 33 .522-16.48L202 16" mask="url(#b)" transform="translate(52)"></path></g></g></g></svg>

package/.storybook/public/favicon.svg

@@ -0,0 +1,7 @@
+<svg width="360" height="360" viewBox="0 0 360 360" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="360" height="360" rx="34" fill="#005AFF"/>
+<path d="M184.716 220.682C184.352 217.015 182.792 214.167 180.034 212.136C177.277 210.106 173.534 209.091 168.807 209.091C165.595 209.091 162.883 209.545 160.67 210.454C158.458 211.333 156.761 212.56 155.58 214.136C154.428 215.712 153.852 217.5 153.852 219.5C153.792 221.167 154.14 222.621 154.898 223.864C155.686 225.106 156.761 226.182 158.125 227.091C159.489 227.97 161.064 228.742 162.852 229.409C164.64 230.045 166.549 230.591 168.58 231.045L176.943 233.045C181.004 233.954 184.731 235.167 188.125 236.682C191.519 238.197 194.458 240.06 196.943 242.273C199.428 244.485 201.352 247.091 202.716 250.091C204.11 253.091 204.822 256.53 204.852 260.409C204.822 266.106 203.367 271.045 200.489 275.227C197.64 279.379 193.519 282.606 188.125 284.909C182.761 287.182 176.292 288.318 168.716 288.318C161.201 288.318 154.655 287.167 149.08 284.864C143.534 282.56 139.201 279.151 136.08 274.636C132.989 270.091 131.367 264.47 131.216 257.773H150.261C150.474 260.894 151.367 263.5 152.943 265.591C154.549 267.651 156.686 269.212 159.352 270.273C162.049 271.303 165.095 271.818 168.489 271.818C171.822 271.818 174.716 271.333 177.17 270.364C179.655 269.394 181.58 268.045 182.943 266.318C184.307 264.591 184.989 262.606 184.989 260.364C184.989 258.273 184.367 256.515 183.125 255.091C181.913 253.667 180.125 252.454 177.761 251.454C175.428 250.454 172.564 249.545 169.17 248.727L159.034 246.182C151.186 244.273 144.989 241.288 140.443 237.227C135.898 233.167 133.64 227.697 133.67 220.818C133.64 215.182 135.14 210.257 138.17 206.045C141.231 201.833 145.428 198.545 150.761 196.182C156.095 193.818 162.155 192.636 168.943 192.636C175.852 192.636 181.883 193.818 187.034 196.182C192.216 198.545 196.246 201.833 199.125 206.045C202.004 210.257 203.489 215.136 203.58 220.682H184.716Z" fill="white"/>
+<path d="M74.0909 287H41.0909V193.909H74.3637C83.7273 193.909 91.7879 195.773 98.5455 199.5C105.303 203.197 110.5 208.515 114.136 215.455C117.803 222.394 119.636 230.697 119.636 240.364C119.636 250.061 117.803 258.394 114.136 265.364C110.5 272.333 105.273 277.682 98.4546 281.409C91.6667 285.136 83.5455 287 74.0909 287ZM60.7728 270.136H73.2728C79.0909 270.136 83.9849 269.106 87.9546 267.046C91.9546 264.955 94.9546 261.727 96.9546 257.364C98.9849 252.97 100 247.303 100 240.364C100 233.485 98.9849 227.864 96.9546 223.5C94.9546 219.136 91.9697 215.924 88 213.864C84.0303 211.803 79.1364 210.773 73.3182 210.773H60.7728V270.136Z" fill="white"/>
+<path d="M176.67 73.9092L195.443 105.636H196.17L215.034 73.9092H237.261L208.852 120.455L237.898 167H215.261L196.17 135.227H195.443L176.352 167H153.807L182.943 120.455L154.352 73.9092H176.67Z" fill="white"/>
+<path d="M41.0909 73.9092H65.3637L91 136.455H92.0909L117.727 73.9092H142V167H122.909V106.409H122.136L98.0455 166.546H85.0455L60.9546 106.182H60.1819V167H41.0909V73.9092Z" fill="white"/>
+</svg>

package/.storybook/public/pinto.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="505" height="342"><defs><linearGradient id="a" x1="17.264%" x2="89.541%" y1="32.713%" y2="64.759%"><stop offset="0%" stop-color="#F100FF"></stop><stop offset="100%" stop-color="#32C2DA"></stop></linearGradient></defs><g fill="none" fill-rule="evenodd"><path fill="url(#a)" fill-opacity=".2" fill-rule="nonzero" d="M329.54 13c-14.127.061-30.914 9.259-58.134 27.226-86.412 57.042-256.59-.571-269.034 64.173C-24.354 243.437 181.99 328.923 258.934 329h.335c81.699-.062 108.438-53.5 176.053-69.52 73.763-17.48 84.236-100.606 53.45-147.951-27.863-42.846-47.822-42.256-65.994-41.667-13.203.43-25.464.857-39.126-15.375-23.4-27.8-36.677-41.41-53.823-41.487h-.29Z" transform="matrix(-1 0 0 1 505 0)"></path><path stroke="#FFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M125 240c0 6.628-5.372 12-12 12s-12-5.372-12-12 5.372-12 12-12 12 5.372 12 12ZM139 229.5h112M139 240.5h112M139 251.5h112M251 181H101v-39.022a7.98 7.98 0 0 1 7.983-7.978h134.034c4.408 0 7.983 3.571 7.983 7.978V181ZM113 152.5h14M120.5 153v12M73 157c0 9.942-8.06 18-18 18-9.942 0-18-8.058-18-18s8.058-18 18-18c9.94 0 18 8.058 18 18Z"></path><path fill="#FFF" d="M56.349 160.034H59V162h-8v-1.966h3.034v-5.728l-2.969 1.356v-2.459L54.992 152h1.357z"></path><path stroke="#FFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M55.5 185v29M73 240c0 9.942-8.06 18-18 18-9.942 0-18-8.058-18-18 0-9.94 8.058-18 18-18 9.94 0 18 8.06 18 18Z"></path><path fill="#FFF" d="M53.42 242.08H59V244h-8.828v-1.754l3.697-2.137c.714-.42 1.28-.833 1.694-1.242.413-.408.621-.871.621-1.39 0-.454-.165-.829-.493-1.127-.327-.298-.75-.447-1.268-.447-.635 0-1.127.18-1.479.538-.35.36-.515.831-.492 1.416H50c.022-1.203.428-2.146 1.217-2.832.789-.684 1.869-1.025 3.24-1.025 1.266 0 2.282.31 3.048.935.767.623 1.15 1.449 1.15 2.476 0 .883-.345 1.65-1.037 2.301-.692.65-1.67 1.231-2.937 1.738l-1.261.63Z"></path><path stroke="#FFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M73 324c0 9.942-8.06 18-18 18-9.942 0-18-8.058-18-18s8.058-18 18-18c9.94 0 18 8.058 18 18Z"></path><path fill="#FFF" d="M55.13 323.425c1.176.093 2.114.429 2.816 1.006S59 325.736 59 326.611c0 1.002-.409 1.816-1.226 2.445-.819.63-1.867.944-3.144.944-1.337 0-2.442-.342-3.318-1.029-.874-.686-1.312-1.56-1.312-2.622h2.487c0 .546.202.996.604 1.346.403.35.916.526 1.539.526.587 0 1.067-.152 1.442-.456.374-.305.56-.69.56-1.153 0-.464-.195-.843-.586-1.137-.391-.295-.904-.441-1.537-.441h-1.486l-.708-1.268 3.402-2.894h-5.373V319h8.31v1.718l-3.523 2.707Z"></path><path stroke="#FFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M55.5 267v29M146 319.5h106M236 331l16-11.995L236 307M115.174 334h59.652c7.796 0 14.174-6.3 14.174-14s-6.378-14-14.174-14h-59.652c-7.796 0-14.174 6.3-14.174 14s6.378 14 14.174 14Z"></path><g stroke="#FFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M458 106.5H300M458 124.5H300M458 142.5H300M458 160.5H300M458 178.5H300M458 196.5H300M458 214.5H300M458 86.298H300.284V0H458zM458 0 300 86M300 0l158 86"></path></g></g></svg>

package/.storybook/public/xb.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="365" viewBox="0 0 512 365"><defs><linearGradient x1="25.328%" y1="61.65%" x2="72.381%" y2="21.408%" id="4jp98ab4ha"><stop stop-color="#08ACD8" offset="0%"></stop><stop stop-color="#91DD64" offset="100%"></stop></linearGradient><path id="fapycvgb6b" d="M5.541 365h504.9V0H5.54z"></path></defs><g fill="none" fill-rule="evenodd"><path d="M255.523 12.91c-40.279 20.83-22.067 50.928-58.677 92.864-50.979 58.396-123.92 43.14-155.32 92.863-22.92 36.294-11.933 88.56 24.16 113.79 68.437 47.838 240.783 8.029 314.956-75.86 65.354-73.913 62.339-190.92-8.629-224.965C356.03 3.935 335.608 0 315.06 0c-21.307 0-42.751 4.23-59.537 12.91" fill-opacity=".2" fill="url(#4jp98ab4ha)" transform="translate(1)"></path><path stroke="#FFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="m394.561 172.114-15.88 18.723 15.88 18.724M433.907 172.114l15.88 18.723-15.88 18.724M418.76 172.114l-10.133 37.447"></path><path d="M468.079 194.024c0 29.265-24.107 52.988-53.846 52.988-29.738.002-53.848-23.721-53.848-52.987.002-40.816 48.687-64.286 53.85-87.032 5.656 23.23 53.847 45.006 53.847 87.03M1 206.915h208.614V17.199H1.001zM209.613 45.387H1M51.424 32.411H37.098M27.774 32.411H13.449M36.814 173.356h88.639M36.814 151.879h60.883M36.814 129.954h104.307M36.814 108.477h126.242M36.814 88.789h85.952M36.814 66.865H93.22" stroke="#FFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path stroke="#FFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M209.613 64.131h55.616v157.04h-128.2v-14.256M265.229 85.327h-55.616M229.197 175.001v-14.784"></path><path d="M209.521 175c0-10.858 8.812-19.665 19.676-19.665M229.197 116.002c10.865 0 19.675 8.807 19.675 19.667 0 10.859-8.81 19.667-19.675 19.667M229.197 149.533v-27.73M288.096 253.155h79.258l22.253 82.387H265.844z" stroke="#FFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path stroke="#FFF" stroke-width="2" stroke-linecap="square" stroke-linejoin="round" stroke-dasharray="7" d="M297.041 261.5v68"></path></g></svg>

package/.storybook/src/global.d.ts

@@ -0,0 +1,16 @@
+declare module "*.png" {
+  export default "" as string
+}
+
+declare module "*.jpg" {
+  export default "" as string
+}
+
+declare module "*.svg" {
+  export default "" as string
+}
+
+declare module "*.twig" {
+  const content: any
+  export default content
+}

package/.storybook/src/theme.ts

@@ -0,0 +1,8 @@
+import { create } from "storybook/theming/create"
+
+export default create({
+  base: "light",
+  brandTitle: "Mixtape Storybook",
+  colorSecondary: "#005AFF",
+  brandImage: "./mixtape-logo.png",
+})

package/.storybook/storybook.css

@@ -0,0 +1,35 @@
+.sbdocs-content {
+  max-inline-size: 1440px !important;
+}
+
+:root {
+  --storybook-accent: oklch(50% 0.3 320deg);
+}
+
+[id*="atom-spacing"] [class^="mx-spacing"],
+[id*="layout-section--section--primary"] [class*="mx-section--"]:not([class*="mx-background--"]),
+[id*="layout-grid"] .mx-grid,
+[id*="layout-sidebar"] .mx-grid--sidebar {
+  background-color: color-mix(in oklch, var(--storybook-accent), white 90%);
+  color: var(--storybook-accent);
+
+  & > * {
+    border: 1px solid currentcolor;
+    background-color: white;
+    color: inherit;
+    padding-block: 4px;
+    padding-inline: 8px;
+  }
+}
+
+[id*="component-dialog--dialog"] mx-dialog {
+  min-block-size: 300px;
+}
+
+[id*="atom-background"] .mx-page {
+  display: block;
+
+  & :where(.mx-page, [class*="mx-background--"]:not(.mx-background--box)) {
+    display: block;
+  }
+}

package/.storybook/test-runner.ts

@@ -0,0 +1,77 @@
+import { getStoryContext, TestRunnerConfig, waitForPageReady } from "@storybook/test-runner"
+import { injectAxe, checkA11y, configureAxe } from "axe-playwright"
+
+/*
+ * See https://storybook.js.org/docs/writing-tests/test-runner#test-hook-api
+ * to learn more about the test-runner Hooks API.
+ */
+const config: TestRunnerConfig = {
+  tags: {
+    exclude: ["no-snapshot"],
+  },
+  async preVisit(page) {
+    await injectAxe(page)
+  },
+  async postVisit(page, context) {
+    await waitForPageReady(page)
+    await page.emulateMedia({ reducedMotion: "reduce" })
+    await page.evaluate(() => new Promise(resolve => window.requestIdleCallback(resolve)))
+    await page.evaluate(() => new Promise(resolve => setTimeout(resolve, 500)))
+
+    // Unique IDs
+    const ids = await page.$$eval(
+      "[aria-controls],[aria-labelledby],[aria-owns],[aria-describedby]",
+      (els: Array<HTMLElement>) => {
+        const attributes = ["aria-controls", "aria-labelledby", "aria-owns", "aria-describedby"]
+        const before = els.map(
+          el =>
+            el.getAttribute("aria-controls") ||
+            el.getAttribute("aria-labelledby") ||
+            el.getAttribute("aria-describedby") ||
+            el.getAttribute("aria-owns"),
+        )
+        attributes.forEach(attr => {
+          els.forEach((el, ix) => {
+            if (!el.hasAttribute(attr)) {
+              return
+            }
+            el.setAttribute(attr, `unique-${ix}`)
+          })
+        })
+        return before
+      },
+    )
+    if (ids.length) {
+      await page.$$eval(ids.map(id => `[id="${id}"]`).join(","), (els: Array<HTMLElement>) =>
+        els.forEach((el, ix) => el.setAttribute("id", `unique-${ix}`)),
+      )
+    }
+
+    // Automated snapshot testing for each story.
+    const elementHandler = await page.$("#storybook-root")
+    const innerHTML = await elementHandler.innerHTML()
+    // @ts-expect-error expect is available.
+    expect(innerHTML).toMatchSnapshot()
+
+    const storyContext = await getStoryContext(page, context)
+    // Do not run a11y tests on disabled stories.
+    if (storyContext.parameters?.a11y?.disable) {
+      return
+    }
+    // Apply story-level a11y rules
+    await configureAxe(page, {
+      rules: storyContext.parameters?.a11y?.config?.rules,
+    })
+    const element = storyContext.parameters?.a11y?.element ?? "#storybook-root"
+    // Automated accessibility testing for each story.
+    await checkA11y(page, element, {
+      detailedReport: true,
+      detailedReportOptions: {
+        html: true,
+      },
+    })
+    await elementHandler.dispose()
+  },
+}
+
+export default config

package/.storybook/theme-demo.css

@@ -0,0 +1,89 @@
+@import url("https://fonts.googleapis.com/css2?family=Mozilla+Headline:wght@200..700&family=Mozilla+Text:wght@200..700&display=swap");
+
+.theme--demo {
+  --font-family: "Mozilla Text", Inter, helvetica, arial, sans-serif;
+  --heading-font-family: "Mozilla Headline", Inter, helvetica, arial, sans-serif;
+  --font-size: 18px;
+  --font-size-xl: 40px;
+  --font-size-xxl: 60px;
+  --font-size-xxxl: 80px;
+  --font-size-l: 30px;
+  --container-max-width: 90ch;
+  --container-max-width-narrow: 50rem;
+  --border-radius-l: 4px;
+  --ratio: unset;
+  --section-xl: 7rem;
+
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+
+  & .mx-text--lede {
+    --font-size: var(--font-size-m);
+  }
+
+  & .mx-rich-text p {
+    max-inline-size: var(--container-max-width);
+  }
+
+  & .mx-background--box {
+    border-width: 2px;
+  }
+
+  &
+    :is(
+      .mx-background--reverse,
+      .mx-background--primary,
+      .mx-background--accent,
+      .mx-background--alt
+    ) {
+    --link-colour: var(--colour-foreground);
+    --line-colour: var(--colour-foreground);
+  }
+
+  & .mx-nav--dropdown {
+    --toggle-top: 18px;
+
+    & .mx-nav__level-1 > li > a:where(:not(.button)) {
+      font-weight: var(--font-weight-bold);
+      font-size: var(--font-size-m);
+    }
+  }
+
+  & .mx-hero-banner {
+    &.mx-hero-banner--hero {
+      --hero-height: 56rem;
+    }
+
+    &:not(:has(.mx-hero-banner__aside)) {
+      --hero-columns: 1fr;
+    }
+
+    & h1,
+    .mx-heading--xxl {
+      --heading-font-size: var(--font-size-xxxl);
+      --container-max-width-narrow: 25ch;
+    }
+
+    & .mx-text--lede {
+      --font-size: var(--font-size-xl);
+      --container-max-width-narrow: 40ch;
+    }
+  }
+
+  & .mx-footer__inner {
+    & .mx-footer__aoc {
+      margin-inline: auto;
+      max-inline-size: 101ch;
+    }
+
+    & .mx-social-links {
+      grid-area: links;
+      justify-content: end;
+    }
+
+    & .mx-footer__copyright:not(:first-child) {
+      padding-block-start: 0;
+      margin-block-start: 0;
+    }
+  }
+}

package/dist/build/accordion.entry.js

@@ -1,33 +1,9 @@
-import "./chunks/Accordion-O-huO4At.js";
+import "./chunks/Accordion-D1HQ0FDq.js";
 class AccordionGroup extends HTMLElement {
+  internals_;
+  controller;
   constructor() {
     super();
-    this.handleClick = ({ target }) => {
-      if (target === this.expandTrigger) {
-        this.handleExpand();
-      }
-      if (target === this.collapseTrigger) {
-        this.handleCollapse();
-      }
-    };
-    this.handleExpand = () => {
-      this.accordions.forEach((detail) => detail.open = true);
-      this.expandTrigger.disabled = true;
-      this.collapseTrigger.disabled = false;
-    };
-    this.handleCollapse = () => {
-      this.accordions.forEach((detail) => detail.open = false);
-      this.expandTrigger.disabled = false;
-      this.collapseTrigger.disabled = true;
-    };
-    this.handleToggle = () => {
-      this.expandTrigger.disabled = [...this.accordions].every(
-        (details) => details.open === true
-      );
-      this.collapseTrigger.disabled = [...this.accordions].every(
-        (details) => details.open !== true
-      );
-    };
     this.internals_ = this.attachInternals();
     this.controller = new AbortController();
   }
@@ -47,37 +23,50 @@ class AccordionGroup extends HTMLElement {
   disconnectedCallback() {
     this.controller.abort();
   }
+  handleClick = ({ target }) => {
+    if (target === this.expandTrigger) {
+      this.handleExpand();
+    }
+    if (target === this.collapseTrigger) {
+      this.handleCollapse();
+    }
+  };
+  handleExpand = () => {
+    this.accordions.forEach((detail) => detail.open = true);
+    this.expandTrigger.disabled = true;
+    this.collapseTrigger.disabled = false;
+  };
+  handleCollapse = () => {
+    this.accordions.forEach((detail) => detail.open = false);
+    this.expandTrigger.disabled = false;
+    this.collapseTrigger.disabled = true;
+  };
+  handleToggle = () => {
+    this.expandTrigger.disabled = [...this.accordions].every((details) => details.open === true);
+    this.collapseTrigger.disabled = [...this.accordions].every((details) => details.open !== true);
+  };
   get accordions() {
     const accordions = this.querySelectorAll("details");
     if (!accordions.length) {
-      throw new Error(
-        `${this.localName} must contain at least one <details> element.`
-      );
+      throw new Error(`${this.localName} must contain at least one <details> element.`);
     }
     return accordions;
   }
   get expandTrigger() {
-    const trigger = this.querySelector(
-      "button[data-expand]"
-    );
+    const trigger = this.querySelector("button[data-expand]");
     if (!trigger) {
-      throw new Error(
-        `${this.localName} must contain a <button data-expand> element.`
-      );
+      throw new Error(`${this.localName} must contain a <button data-expand> element.`);
     }
     return trigger;
   }
   get collapseTrigger() {
-    const trigger = this.querySelector(
-      "button[data-collapse]"
-    );
+    const trigger = this.querySelector("button[data-collapse]");
     if (!trigger) {
-      throw new Error(
-        `${this.localName} must contain a <button data-collapse> element.`
-      );
+      throw new Error(`${this.localName} must contain a <button data-collapse> element.`);
     }
     return trigger;
   }
 }
-customElements.define("mx-accordion-group", AccordionGroup);
+if (!customElements.get("mx-accordion-group"))
+  customElements.define("mx-accordion-group", AccordionGroup);
 //# sourceMappingURL=accordion.entry.js.map

package/dist/build/accordion.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.entry.js","sources":["../../src/Component/Accordion/Elements/AccordionGroup.ts"],"sourcesContent":["/**\n * Accordion Group\n * @file Support opening and closing all.\n */\n\nexport default class AccordionGroup extends HTMLElement {\n  internals_: ElementInternals\n  controller: AbortController\n\n  constructor() {\n    super()\n    this.internals_ = this.attachInternals()\n    this.controller = new AbortController()\n  }\n\n  connectedCallback(): void {\n    if (!this.accordions || !this.expandTrigger || !this.collapseTrigger) return\n    this.handleToggle()\n    const { signal }: AbortController = this.controller\n    this.addEventListener(\"click\", this.handleClick, {\n      signal,\n    })\n    this.accordions.forEach(details =>\n      details.addEventListener(\"toggle\", this.handleToggle, {\n        signal,\n      }),\n    )\n  }\n\n  disconnectedCallback(): void {\n    this.controller.abort()\n  }\n\n  handleClick = ({ target }) => {\n    if (target === this.expandTrigger) {\n      this.handleExpand()\n    }\n    if (target === this.collapseTrigger) {\n      this.handleCollapse()\n    }\n  }\n\n  handleExpand = () => {\n    this.accordions.forEach(detail => (detail.open = true))\n    this.expandTrigger.disabled = true\n    this.collapseTrigger.disabled = false\n  }\n\n  handleCollapse = () => {\n    this.accordions.forEach(detail => (detail.open = false))\n    this.expandTrigger.disabled = false\n    this.collapseTrigger.disabled = true\n  }\n\n  handleToggle = () => {\n    this.expandTrigger.disabled = [...this.accordions].every(\n      details => details.open === true,\n    )\n    this.collapseTrigger.disabled = [...this.accordions].every(\n      details => details.open !== true,\n    )\n  }\n\n  get accordions(): NodeListOf<HTMLDetailsElement> | null {\n    const accordions: NodeListOf<HTMLDetailsElement> | null =\n      this.querySelectorAll(\"details\")\n    if (!accordions.length) {\n      throw new Error(\n        `${this.localName} must contain at least one <details> element.`,\n      )\n    }\n    return accordions\n  }\n\n  get expandTrigger(): HTMLButtonElement | null {\n    const trigger: HTMLButtonElement | null = this.querySelector(\n      \"button[data-expand]\",\n    )\n    if (!trigger) {\n      throw new Error(\n        `${this.localName} must contain a <button data-expand> element.`,\n      )\n    }\n    return trigger\n  }\n\n  get collapseTrigger(): HTMLButtonElement | null {\n    const trigger: HTMLButtonElement | null = this.querySelector(\n      \"button[data-collapse]\",\n    )\n    if (!trigger) {\n      throw new Error(\n        `${this.localName} must contain a <button data-collapse> element.`,\n      )\n    }\n    return trigger\n  }\n}\n\ncustomElements.define(\"mx-accordion-group\", AccordionGroup)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"mx-accordion-group\": AccordionGroup\n  }\n}\n"],"names":[],"mappings":";AAKA,MAAqB,uBAAuB,YAAY;AAAA,EAItD,cAAc;AACZ,UAAA;AAuBF,SAAA,cAAc,CAAC,EAAE,aAAa;AAC5B,UAAI,WAAW,KAAK,eAAe;AACjC,aAAK,aAAA;AAAA,MACP;AACA,UAAI,WAAW,KAAK,iBAAiB;AACnC,aAAK,eAAA;AAAA,MACP;AAAA,IACF;AAEA,SAAA,eAAe,MAAM;AACnB,WAAK,WAAW,QAAQ,CAAA,WAAW,OAAO,OAAO,IAAK;AACtD,WAAK,cAAc,WAAW;AAC9B,WAAK,gBAAgB,WAAW;AAAA,IAClC;AAEA,SAAA,iBAAiB,MAAM;AACrB,WAAK,WAAW,QAAQ,CAAA,WAAW,OAAO,OAAO,KAAM;AACvD,WAAK,cAAc,WAAW;AAC9B,WAAK,gBAAgB,WAAW;AAAA,IAClC;AAEA,SAAA,eAAe,MAAM;AACnB,WAAK,cAAc,WAAW,CAAC,GAAG,KAAK,UAAU,EAAE;AAAA,QACjD,CAAA,YAAW,QAAQ,SAAS;AAAA,MAAA;AAE9B,WAAK,gBAAgB,WAAW,CAAC,GAAG,KAAK,UAAU,EAAE;AAAA,QACnD,CAAA,YAAW,QAAQ,SAAS;AAAA,MAAA;AAAA,IAEhC;AAlDE,SAAK,aAAa,KAAK,gBAAA;AACvB,SAAK,aAAa,IAAI,gBAAA;AAAA,EACxB;AAAA,EAEA,oBAA0B;AACxB,QAAI,CAAC,KAAK,cAAc,CAAC,KAAK,iBAAiB,CAAC,KAAK,gBAAiB;AACtE,SAAK,aAAA;AACL,UAAM,EAAE,WAA4B,KAAK;AACzC,SAAK,iBAAiB,SAAS,KAAK,aAAa;AAAA,MAC/C;AAAA,IAAA,CACD;AACD,SAAK,WAAW;AAAA,MAAQ,CAAA,YACtB,QAAQ,iBAAiB,UAAU,KAAK,cAAc;AAAA,QACpD;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAAA,EAEA,uBAA6B;AAC3B,SAAK,WAAW,MAAA;AAAA,EAClB;AAAA,EAgCA,IAAI,aAAoD;AACtD,UAAM,aACJ,KAAK,iBAAiB,SAAS;AACjC,QAAI,CAAC,WAAW,QAAQ;AACtB,YAAM,IAAI;AAAA,QACR,GAAG,KAAK,SAAS;AAAA,MAAA;AAAA,IAErB;AACA,WAAO;AAAA,EACT;AAAA,EAEA,IAAI,gBAA0C;AAC5C,UAAM,UAAoC,KAAK;AAAA,MAC7C;AAAA,IAAA;AAEF,QAAI,CAAC,SAAS;AACZ,YAAM,IAAI;AAAA,QACR,GAAG,KAAK,SAAS;AAAA,MAAA;AAAA,IAErB;AACA,WAAO;AAAA,EACT;AAAA,EAEA,IAAI,kBAA4C;AAC9C,UAAM,UAAoC,KAAK;AAAA,MAC7C;AAAA,IAAA;AAEF,QAAI,CAAC,SAAS;AACZ,YAAM,IAAI;AAAA,QACR,GAAG,KAAK,SAAS;AAAA,MAAA;AAAA,IAErB;AACA,WAAO;AAAA,EACT;AACF;AAEA,eAAe,OAAO,sBAAsB,cAAc;"}
+{"version":3,"file":"accordion.entry.js","sources":["../../src/Component/Accordion/Elements/AccordionGroup.ts"],"sourcesContent":["/**\n * Accordion Group\n * @file Support opening and closing all.\n */\n\nexport default class AccordionGroup extends HTMLElement {\n  internals_: ElementInternals\n  controller: AbortController\n\n  constructor() {\n    super()\n    this.internals_ = this.attachInternals()\n    this.controller = new AbortController()\n  }\n\n  connectedCallback(): void {\n    if (!this.accordions || !this.expandTrigger || !this.collapseTrigger) return\n    this.handleToggle()\n    const { signal }: AbortController = this.controller\n    this.addEventListener(\"click\", this.handleClick, {\n      signal,\n    })\n    this.accordions.forEach(details =>\n      details.addEventListener(\"toggle\", this.handleToggle, {\n        signal,\n      }),\n    )\n  }\n\n  disconnectedCallback(): void {\n    this.controller.abort()\n  }\n\n  handleClick = ({ target }) => {\n    if (target === this.expandTrigger) {\n      this.handleExpand()\n    }\n    if (target === this.collapseTrigger) {\n      this.handleCollapse()\n    }\n  }\n\n  handleExpand = () => {\n    this.accordions.forEach(detail => (detail.open = true))\n    this.expandTrigger.disabled = true\n    this.collapseTrigger.disabled = false\n  }\n\n  handleCollapse = () => {\n    this.accordions.forEach(detail => (detail.open = false))\n    this.expandTrigger.disabled = false\n    this.collapseTrigger.disabled = true\n  }\n\n  handleToggle = () => {\n    this.expandTrigger.disabled = [...this.accordions].every(details => details.open === true)\n    this.collapseTrigger.disabled = [...this.accordions].every(details => details.open !== true)\n  }\n\n  get accordions(): NodeListOf<HTMLDetailsElement> | null {\n    const accordions: NodeListOf<HTMLDetailsElement> | null = this.querySelectorAll(\"details\")\n    if (!accordions.length) {\n      throw new Error(`${this.localName} must contain at least one <details> element.`)\n    }\n    return accordions\n  }\n\n  get expandTrigger(): HTMLButtonElement | null {\n    const trigger: HTMLButtonElement | null = this.querySelector(\"button[data-expand]\")\n    if (!trigger) {\n      throw new Error(`${this.localName} must contain a <button data-expand> element.`)\n    }\n    return trigger\n  }\n\n  get collapseTrigger(): HTMLButtonElement | null {\n    const trigger: HTMLButtonElement | null = this.querySelector(\"button[data-collapse]\")\n    if (!trigger) {\n      throw new Error(`${this.localName} must contain a <button data-collapse> element.`)\n    }\n    return trigger\n  }\n}\n\nif (!customElements.get(\"mx-accordion-group\"))\n  customElements.define(\"mx-accordion-group\", AccordionGroup)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"mx-accordion-group\": AccordionGroup\n  }\n}\n"],"names":[],"mappings":";AAKA,MAAqB,uBAAuB,YAAY;AAAA,EACtD;AAAA,EACA;AAAA,EAEA,cAAc;AACZ,UAAA;AACA,SAAK,aAAa,KAAK,gBAAA;AACvB,SAAK,aAAa,IAAI,gBAAA;AAAA,EACxB;AAAA,EAEA,oBAA0B;AACxB,QAAI,CAAC,KAAK,cAAc,CAAC,KAAK,iBAAiB,CAAC,KAAK,gBAAiB;AACtE,SAAK,aAAA;AACL,UAAM,EAAE,WAA4B,KAAK;AACzC,SAAK,iBAAiB,SAAS,KAAK,aAAa;AAAA,MAC/C;AAAA,IAAA,CACD;AACD,SAAK,WAAW;AAAA,MAAQ,CAAA,YACtB,QAAQ,iBAAiB,UAAU,KAAK,cAAc;AAAA,QACpD;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAAA,EAEA,uBAA6B;AAC3B,SAAK,WAAW,MAAA;AAAA,EAClB;AAAA,EAEA,cAAc,CAAC,EAAE,aAAa;AAC5B,QAAI,WAAW,KAAK,eAAe;AACjC,WAAK,aAAA;AAAA,IACP;AACA,QAAI,WAAW,KAAK,iBAAiB;AACnC,WAAK,eAAA;AAAA,IACP;AAAA,EACF;AAAA,EAEA,eAAe,MAAM;AACnB,SAAK,WAAW,QAAQ,CAAA,WAAW,OAAO,OAAO,IAAK;AACtD,SAAK,cAAc,WAAW;AAC9B,SAAK,gBAAgB,WAAW;AAAA,EAClC;AAAA,EAEA,iBAAiB,MAAM;AACrB,SAAK,WAAW,QAAQ,CAAA,WAAW,OAAO,OAAO,KAAM;AACvD,SAAK,cAAc,WAAW;AAC9B,SAAK,gBAAgB,WAAW;AAAA,EAClC;AAAA,EAEA,eAAe,MAAM;AACnB,SAAK,cAAc,WAAW,CAAC,GAAG,KAAK,UAAU,EAAE,MAAM,CAAA,YAAW,QAAQ,SAAS,IAAI;AACzF,SAAK,gBAAgB,WAAW,CAAC,GAAG,KAAK,UAAU,EAAE,MAAM,CAAA,YAAW,QAAQ,SAAS,IAAI;AAAA,EAC7F;AAAA,EAEA,IAAI,aAAoD;AACtD,UAAM,aAAoD,KAAK,iBAAiB,SAAS;AACzF,QAAI,CAAC,WAAW,QAAQ;AACtB,YAAM,IAAI,MAAM,GAAG,KAAK,SAAS,+CAA+C;AAAA,IAClF;AACA,WAAO;AAAA,EACT;AAAA,EAEA,IAAI,gBAA0C;AAC5C,UAAM,UAAoC,KAAK,cAAc,qBAAqB;AAClF,QAAI,CAAC,SAAS;AACZ,YAAM,IAAI,MAAM,GAAG,KAAK,SAAS,+CAA+C;AAAA,IAClF;AACA,WAAO;AAAA,EACT;AAAA,EAEA,IAAI,kBAA4C;AAC9C,UAAM,UAAoC,KAAK,cAAc,uBAAuB;AACpF,QAAI,CAAC,SAAS;AACZ,YAAM,IAAI,MAAM,GAAG,KAAK,SAAS,iDAAiD;AAAA,IACpF;AACA,WAAO;AAAA,EACT;AACF;AAEA,IAAI,CAAC,eAAe,IAAI,oBAAoB;AAC1C,iBAAe,OAAO,sBAAsB,cAAc;"}