@arobo/styles 1.0.1

package/dist/themes/default/variables.css

@@ -0,0 +1,157 @@
+@layer base {
+  :root {
+    color-scheme: light;
+
+    color-scheme: light;
+
+    /* == Common Variables == */
+
+    /* Primitive Colors (Do not change between light and dark) */
+    --white: oklch(100% 0 0);
+    --black: oklch(0% 0 0);
+    --snow: oklch(0.9911 0 0);
+    --eclipse: oklch(0.2103 0.0059 285.89);
+
+    /* Spacing scale */
+    --spacing: 0.25rem;
+
+    /* Border */
+    --border-width: 1px;
+    --field-border-width: 0px;
+    --disabled-opacity: 0.5;
+
+    /* Ring offset - Used for focus ring */
+    --ring-offset-width: 2px;
+
+    /* Cursor */
+    --cursor-interactive: pointer;
+    --cursor-disabled: not-allowed;
+
+    /* Radius */
+    --radius: 0.5rem;
+    --field-radius: calc(var(--radius) * 1);
+    --card-radius: calc(var(--radius) * 1.5);
+
+    /* == Light Theme Variables == */
+
+    /* Base Colors */
+    --background: oklch(0.9702 0 0);
+    --foreground: var(--eclipse);
+
+    /* Surface: Used for non-overlay components (cards, accordions, disclosure groups) */
+    --surface: var(--white);
+    --surface-foreground: var(--foreground);
+    --surface-liquid-blur: 12px;
+
+    /* Overlay: Used for floating/overlay components (tooltips, popovers, modals, menus) */
+    --overlay: var(--white);
+    --overlay-foreground: var(--foreground);
+
+    --muted: oklch(0.5517 0.0138 285.94);
+
+    --scrollbar: oklch(87.1% 0.006 286.286);
+
+    --default: oklch(94% 0.001 286.375);
+    --default-foreground: var(--eclipse);
+
+    --accent: oklch(0.6633 0.1901 44.6);
+    --accent-foreground: var(--snow);
+
+    --secondary: oklch(32.02% 0.159 263.34);
+    --secondary-foreground: var(--snow);
+
+    /* Background Colors */
+    --bgColor-accent-emphasis: var(--accent);
+    --bgColor-primary-muted: color-mix(
+      in oklab,
+      var(--surface) 95%,
+      var(--surface-foreground) 5%
+    );
+    --bgColor-secondary-emphasis: var(--secondary);
+    --bgColor-secondary-muted: color-mix(
+      in oklab,
+      var(--surface) 90%,
+      var(--surface-foreground) 10%
+    );
+
+    /* Foreground */
+    --fgColor-muted: var(--color-neutral-500);
+    --fgColor-default: var(--color-neutral-900);
+    --fgColor-placeholder: var(--color-neutral-500);
+    --fgColor-disabled: var(--color-neutral-400);
+    --fgColor-danger: var(--danger);
+    --fgColor-success: var(--success);
+    --fgColor-warning: var(--warning);
+
+    --borderColor-default: var(--color-neutral-200); /* Neutral 200 */
+
+    --borderColor-emphasis: oklch(86.99% 0 0);
+    --borderColor-muted: color-mix(
+      in oklab,
+      var(--borderColor-default) 70%,
+      var(--white) 30%
+    );
+    --borderColor-disabled: color-mix(
+      in oklab,
+      var(--borderColor-default) 50%,
+      var(--white) 50%
+    );
+    --borderColor-accent-emphasis: var(--accent);
+    --borderColor-accent-muted: color-mix(
+      in oklab,
+      var(--accent) 60%,
+      var(--white) 40%
+    );
+    --borderColor-secondary-emphasis: var(--secondary);
+    --borderColor-secondary-muted: color-mix(
+      in oklab,
+      var(--secondary) 30%,
+      var(--white) 70%
+    );
+
+    /* Form Fields */
+    --field-background: var(--white);
+    --field-foreground: oklch(0.2103 0.0059 285.89);
+    --field-placeholder: var(--muted);
+    --field-border: var(
+      --borderColor-default
+    ); /* no border by default on form fields */
+
+    /* Input */
+    --input-secondary-ring: var(--secondary);
+    /* Status Colors */
+    --success: oklch(0.7329 0.1935 150.81);
+    --success-foreground: var(--eclipse);
+
+    --warning: oklch(0.7819 0.1585 72.33);
+    --warning-foreground: var(--eclipse);
+
+    --danger: oklch(0.6532 0.2328 25.74);
+    --danger-foreground: var(--snow);
+
+    /* Component Colors */
+    --segment: var(--white);
+    --segment-foreground: var(--eclipse);
+
+    /* Misc Colors */
+    --border: oklch(90% 0.004 286.32);
+    --separator: oklch(92% 0.004 286.32);
+    --focus: var(--accent);
+    --link: var(--foreground);
+
+    /* Shadows */
+    /* --surface-shadow: 0 0px 0px 0 rgba(24, 24, 27, 0.03), 0 2px 10px 0 rgba(24, 24, 27, 0.08); */
+    --surface-shadow:
+      0 2px 4px 0 rgba(0, 0, 0, 0.04), 0 1px 2px 0 rgba(0, 0, 0, 0.06),
+      0 0 1px 0 rgba(0, 0, 0, 0.06);
+    /* Overlay shadow */
+    --overlay-shadow:
+      0 2px 8px 0 rgba(0, 0, 0, 0.06), 0 -6px 12px 0 rgba(0, 0, 0, 0.03),
+      0 14px 28px 0 rgba(0, 0, 0, 0.08);
+    --field-shadow:
+      0 2px 4px 0 rgba(0, 0, 0, 0.04), 0 1px 2px 0 rgba(0, 0, 0, 0.06),
+      0 0 1px 0 rgba(0, 0, 0, 0.06);
+    /* Skeleton Default Global Animation */
+    --skeleton-animation: shimmer; /* shimmer, pulse, none */
+  }
+}

package/dist/themes/shared/theme.css

@@ -0,0 +1,338 @@
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+
+  --color-surface: var(--surface);
+  --color-surface-foreground: var(--surface-foreground);
+  --color-surface-hover: color-mix(
+    in oklab,
+    var(--surface) 92%,
+    var(--surface-foreground) 8%
+  );
+
+  --color-overlay: var(--overlay);
+  --color-overlay-foreground: var(--overlay-foreground);
+
+  --color-muted: var(--muted);
+
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+
+  --color-segment: var(--segment);
+  --color-segment-foreground: var(--segment-foreground);
+
+  --color-border: var(--border);
+  --color-separator: var(--separator);
+  --color-focus: var(--focus);
+  --color-link: var(--link);
+
+  --color-default: var(--default);
+  --color-default-foreground: var(--fgColor-default);
+
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+
+  --color-danger: var(--danger);
+  --color-danger-foreground: var(--danger-foreground);
+
+  --shadow-surface: var(--surface-shadow);
+  --shadow-overlay: var(--overlay-shadow);
+  --shadow-field: 0px;
+
+  /* Form Field Tokens */
+  --color-field: var(--field-background, var(--color-default));
+  --color-field-hover: color-mix(
+    in oklab,
+    var(--field-background, var(--color-default)) 90%,
+    var(--field-foreground, var(--color-default-foreground)) 10%
+  );
+  --color-field-foreground: var(--field-foreground, var(--color-foreground));
+  --color-field-placeholder: var(--field-placeholder, var(--color-muted));
+  --color-field-border: var(--field-border, var(--color-border));
+  --radius-field: var(--field-radius, var(--radius-xl));
+  --radius-card: var(--card-radius, var(--radius-xl));
+  --border-width-field: var(--field-border-width, var(--border-width));
+
+  /* Calculated Variables */
+
+  /* Colors */
+
+  /* --- background shades --- */
+  --color-background-secondary: color-mix(
+    in oklab,
+    var(--color-background) 96%,
+    var(--color-foreground) 4%
+  );
+  --color-background-tertiary: color-mix(
+    in oklab,
+    var(--color-background) 92%,
+    var(--color-foreground) 8%
+  );
+  --color-background-inverse: var(--color-foreground);
+
+  /* ------------------------- */
+  --color-default-hover: color-mix(
+    in oklab,
+    var(--color-default) 96%,
+    var(--color-default-foreground) 4%
+  );
+  --color-accent-hover: color-mix(
+    in oklab,
+    var(--color-accent) 90%,
+    var(--color-accent-foreground) 10%
+  );
+  --color-success-hover: color-mix(
+    in oklab,
+    var(--color-success) 90%,
+    var(--color-success-foreground) 10%
+  );
+  --color-warning-hover: color-mix(
+    in oklab,
+    var(--color-warning) 90%,
+    var(--color-warning-foreground) 10%
+  );
+  --color-danger-hover: color-mix(
+    in oklab,
+    var(--color-danger) 90%,
+    var(--color-danger-foreground) 10%
+  );
+
+  /* Form Field Colors */
+  --color-field-hover: color-mix(
+    in oklab,
+    var(--color-field) 90%,
+    var(--color-field-foreground) 2%
+  );
+  --color-field-focus: var(--color-field);
+  --color-field-border-hover: color-mix(
+    in oklab,
+    var(--color-field-border) 88%,
+    var(--color-field-foreground) 10%
+  );
+  --color-field-border-focus: var(--color-borderColor-accent-emphasis);
+
+  /* Input colors */
+  --color-input-secondary-ring: var(--input-secondary-ring);
+
+  /* Background Colors */
+  --color-bgColor-accent-emphasis: var(--bgColor-accent-emphasis);
+  --color-bgColor-accent-muted: var(--bgColor-accent-muted);
+  --color-bgColor-secondary-emphasis: var(--bgColor-secondary-emphasis);
+  --color-bgColor-secondary-muted: var(--bgColor-secondary-muted);
+
+  /* Foreground Colors */
+  --color-fgColor-muted: var(--fgColor-muted);
+  --color-fgColor-default: var(--fgColor-default);
+  --color-fgColor-placeholder: var(--fgColor-placeholder);
+  --color-fgColor-disabled: var(--fgColor-disabled);
+  --color-fgColor-danger: var(--fgColor-danger);
+  --color-fgColor-success: var(--fgColor-success);
+  --color-fgColor-warning: var(--fgColor-warning);
+
+  /* Border Colors */
+  --color-borderColor-default: var(--borderColor-default);
+  --color-borderColor-emphasis: var(--borderColor-emphasis);
+  --color-borderColor-muted: var(--borderColor-muted);
+  --color-borderColor-disabled: var(--borderColor-disabled);
+  --color-borderColor-accent-emphasis: var(--borderColor-accent-emphasis);
+  --color-borderColor-accent-muted: var(--borderColor-accent-muted);
+  --color-borderColor-secondary-emphasis: var(--borderColor-secondary-emphasis);
+  --color-borderColor-secondary-muted: var(--borderColor-secondary-muted);
+
+  /* Soft Colors */
+  --color-accent-soft: color-mix(
+    in oklab,
+    var(--color-accent) 15%,
+    transparent
+  );
+  --color-accent-soft-foreground: var(--color-accent);
+  --color-accent-soft-hover: color-mix(
+    in oklab,
+    var(--color-accent) 20%,
+    transparent
+  );
+
+  --color-danger-soft: color-mix(
+    in oklab,
+    var(--color-danger) 15%,
+    transparent
+  );
+  --color-danger-soft-foreground: var(--color-danger);
+  --color-danger-soft-hover: color-mix(
+    in oklab,
+    var(--color-danger) 20%,
+    transparent
+  );
+
+  --color-warning-soft: color-mix(
+    in oklab,
+    var(--color-warning) 15%,
+    transparent
+  );
+  --color-warning-soft-foreground: var(--color-warning);
+  --color-warning-soft-hover: color-mix(
+    in oklab,
+    var(--color-warning) 20%,
+    transparent
+  );
+
+  --color-success-soft: color-mix(
+    in oklab,
+    var(--color-success) 15%,
+    transparent
+  );
+  --color-success-soft-foreground: var(--color-success);
+  --color-success-soft-hover: color-mix(
+    in oklab,
+    var(--color-success) 20%,
+    transparent
+  );
+
+  /* Surface Levels - progressively darker/lighter shades for layering */
+  --color-surface-secondary: color-mix(
+    in oklab,
+    var(--surface) 94%,
+    var(--surface-foreground) 6%
+  );
+  --color-surface-tertiary: color-mix(
+    in oklab,
+    var(--surface) 92%,
+    var(--surface-foreground) 8%
+  );
+
+  /* On Surface Colors (on default surface) */
+  --color-on-surface: color-mix(
+    in oklab,
+    var(--surface) 93%,
+    var(--surface-foreground) 7%
+  );
+  --color-on-surface-foreground: var(--surface-foreground);
+  --color-on-surface-hover: color-mix(
+    in oklab,
+    var(--surface) 91%,
+    var(--surface-foreground) 9%
+  );
+  --color-on-surface-focus: var(--color-on-surface);
+
+  /* On Surface Colors - Secondary (on secondary surface) */
+  --color-on-surface-secondary: color-mix(
+    in oklab,
+    var(--surface) 87%,
+    var(--surface-foreground) 13%
+  );
+  --color-on-surface-secondary-foreground: var(--surface-foreground);
+  --color-on-surface-secondary-hover: color-mix(
+    in oklab,
+    var(--surface) 85%,
+    var(--surface-foreground) 15%
+  );
+  --color-on-surface-secondary-focus: var(--color-on-surface-secondary);
+
+  /* On Surface Colors - Tertiary (on tertiary surface) */
+  --color-on-surface-tertiary: color-mix(
+    in oklab,
+    var(--surface) 85%,
+    var(--surface-foreground) 15%
+  );
+  --color-on-surface-tertiary-foreground: var(--surface-foreground);
+  --color-on-surface-tertiary-hover: color-mix(
+    in oklab,
+    var(--surface) 84%,
+    var(--surface-foreground) 16%
+  );
+  --color-on-surface-tertiary-focus: var(--color-on-surface-tertiary);
+
+  /* Separator Colors - Levels */
+  --color-separator-secondary: color-mix(
+    in oklab,
+    var(--surface) 85%,
+    var(--surface-foreground) 15%
+  );
+  --color-separator-tertiary: color-mix(
+    in oklab,
+    var(--surface) 81%,
+    var(--surface-foreground) 19%
+  );
+
+  /* Border Colors - Levels (progressive contrast: default → secondary → tertiary) */
+  /* Light mode: lighter → darker | Dark mode: darker → lighter */
+  --color-border-secondary: color-mix(
+    in oklab,
+    var(--surface) 78%,
+    var(--surface-foreground) 22%
+  );
+  --color-border-tertiary: color-mix(
+    in oklab,
+    var(--surface) 66%,
+    var(--surface-foreground) 34%
+  );
+
+  /* Radius and default sizes - defaults can change by just changing the --radius */
+  --radius-xs: calc(var(--radius) * 0.25); /* 0.125rem (2px) */
+  --radius-sm: calc(var(--radius) * 0.5); /* 0.25rem (4px) */
+  --radius-md: calc(var(--radius) * 0.75); /* 0.375rem (6px) */
+  --radius-lg: calc(var(--radius) * 1); /* 0.5rem (8px) */
+  --radius-xl: calc(var(--radius) * 1.5); /* 0.75rem (12px) */
+  --radius-2xl: calc(var(--radius) * 2); /* 1rem (16px) */
+  --radius-3xl: calc(var(--radius) * 3); /* 1.5rem (24px) */
+  --radius-4xl: calc(var(--radius) * 4); /* 2rem (32px) */
+
+  /* Transition Timing Functions  */
+  --ease-smooth: ease; /* same as transition: ease; */
+  /* These custom curves are made by https://twitter.com/bdc */
+
+  /* From smoother to faster */
+  --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+  --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
+  --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+  --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
+  --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
+  /* From slower to faster */
+  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
+  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
+  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
+  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
+  --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
+  /* Custom smooth-out curve: fast start, smooth stop - Apple style */
+  --ease-out-fluid: cubic-bezier(0.32, 0.72, 0, 1);
+  /* From slower to faster */
+  --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
+  --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
+  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
+  --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
+  --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
+  --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
+
+  /* Linear */
+  --ease-linear: linear;
+
+  /* Animations */
+  --animate-spin-fast: spin 0.75s linear infinite;
+  --animate-skeleton: skeleton 2s linear infinite;
+  --animate-caret-blink: caret-blink 1.2s ease-out infinite;
+
+  --blur-surface-liquid: var(--surface-liquid-blur, 10px);
+
+  @keyframes skeleton {
+    100% {
+      transform: translateX(200%);
+    }
+  }
+
+  @keyframes caret-blink {
+    0%,
+    70%,
+    100% {
+      opacity: 1;
+    }
+    20%,
+    50% {
+      opacity: 0;
+    }
+  }
+}

package/dist/utilities/index.css

@@ -0,0 +1,45 @@
+/* === Focus Ring === */
+@utility focus-ring {
+  @apply ring-2 ring-focus ring-offset-0 ring-offset-background outline-none;
+  /* Overrides the ring offset from the theme variables */
+  --tw-ring-offset-width: var(--ring-offset-width);
+}
+
+@utility focus-field-ring {
+  @apply ring-2 ring-focus ring-offset-0 outline-none;
+  /* No separation - ring sits directly against the element */
+  --tw-ring-offset-width: 0px;
+}
+
+@utility invalid-field-ring {
+  @apply ring-1 ring-danger ring-offset-0 outline-none;
+  /* No separation - ring sits directly against the element */
+  --tw-ring-offset-width: 0px;
+}
+
+@utility no-highlight {
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* === Statuses === */
+@utility status-focused {
+  @apply focus-ring;
+}
+
+@utility status-focused-field {
+  @apply focus-field-ring;
+}
+
+@utility status-invalid-field {
+  @apply invalid-field-ring;
+}
+
+@utility status-disabled {
+  opacity: var(--disabled-opacity);
+  cursor: var(--cursor-disabled);
+  pointer-events: none;
+}
+
+@utility status-pending {
+  @apply pointer-events-none;
+}

package/dist/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./state";
+//# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC"}

package/dist/utils/state.d.ts

@@ -0,0 +1,17 @@
+export declare const focusRing: import("tailwind-variants").TVReturnType<{
+    isFocusVisible: {
+        false: string;
+        true: string;
+    };
+}, undefined, "focus-ring", {
+    isFocusVisible: {
+        false: string;
+        true: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    isFocusVisible: {
+        false: string;
+        true: string;
+    };
+}, undefined, "focus-ring", unknown, unknown, undefined>>;
+//# sourceMappingURL=state.d.ts.map

package/dist/utils/state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"state.d.ts","sourceRoot":"","sources":["../../src/utils/state.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;yDAQpB,CAAC"}

package/dist/utils/state.js

@@ -0,0 +1,13 @@
+import { tv } from 'tailwind-variants';
+
+const focusRing = tv({
+    base: "focus-ring",
+    variants: {
+        isFocusVisible: {
+            false: "",
+            true: "outline-2",
+        },
+    },
+});
+
+export { focusRing };

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@arobo/styles",
+  "version": "1.0.1",
+  "private": false,
+  "type": "module",
+  "exports": {
+    ".": {
+      "style": "./dist/index.css",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./css": {
+      "style": "./dist/index.css",
+      "default": "./dist/index.css"
+    },
+    "./components/*": {
+      "types": "./dist/components/*/index.d.ts",
+      "import": "./dist/components/*/index.js",
+      "default": "./dist/components/*/index.js"
+    },
+    "./base": "./dist/base/base.css",
+    "./base/*.css": "./dist/base/*.css",
+    "./components/*.css": "./dist/components/*.css",
+    "./themes/default": "./dist/themes/default/index.css",
+    "./themes/*/*.css": "./dist/themes/*/*.css",
+    "./themes/*.css": "./dist/themes/*.css",
+    "./utilities": "./dist/utilities/index.css",
+    "./variants": "./dist/variants/index.css",
+    "./package.json": "./package.json"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "files": [
+    "dist",
+    "src"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "tailwind-variants": "^3.2.2",
+    "tw-animate-css": "^1.4.0"
+  },
+  "peerDependencies": {
+    "tailwindcss": ">=4.0.0"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "style": "./dist/index.css",
+  "browser": "./dist/arobo.min.css"
+}

package/src/components/button/button.styles.ts

@@ -0,0 +1,38 @@
+import type { VariantProps } from "tailwind-variants";
+
+import { tv } from "tailwind-variants";
+
+export const buttonVariants = tv({
+  base: "button",
+  defaultVariants: {
+    fullWidth: false,
+    isIconOnly: false,
+    size: "md",
+    variant: "primary",
+  },
+  variants: {
+    fullWidth: {
+      false: "",
+      true: "button--full-width",
+    },
+    isIconOnly: {
+      true: "button--icon-only",
+    },
+    size: {
+      lg: "button--lg",
+      md: "button--md",
+      sm: "button--sm",
+    },
+    variant: {
+      danger: "button--danger",
+      "danger-soft": "button--danger-soft",
+      ghost: "button--ghost",
+      outline: "button--outline",
+      primary: "button--primary",
+      secondary: "button--secondary",
+      tertiary: "button--tertiary",
+    },
+  },
+});
+
+export type ButtonVariants = VariantProps<typeof buttonVariants>;

package/src/components/button/index.ts

@@ -0,0 +1 @@
+export * from "./button.styles";

package/src/components/button-group/button-group.styles.ts

@@ -0,0 +1,18 @@
+import type { VariantProps } from "tailwind-variants";
+
+import { tv } from "tailwind-variants";
+
+export const buttonGroupVariants = tv({
+  base: "button-group",
+  defaultVariants: {
+    fullWidth: false,
+  },
+  variants: {
+    fullWidth: {
+      false: "",
+      true: "button-group--full-width",
+    },
+  },
+});
+
+export type ButtonGroupVariants = VariantProps<typeof buttonGroupVariants>;

package/src/components/button-group/index.ts

@@ -0,0 +1 @@
+export * from "./button-group.styles";