@intlayer/design-system 2.0.2

package/dist/components/Button/index.d.ts

@@ -0,0 +1,22 @@
+import { LucideIcon } from 'lucide-react';
+import { ButtonHTMLAttributes, DetailedHTMLProps, FC } from 'react';
+
+type Variant = 'default' | 'outline' | 'link' | 'invisible-link' | 'none';
+type Color = 'primary' | 'secondary' | 'destructive' | 'neutral' | 'light' | 'dark' | 'text';
+type Size = 'sm' | 'lg' | 'icon';
+export type ButtonProps = DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & {
+    /**
+     * Optional icon to be displayed on the button
+     */
+    Icon?: FC | LucideIcon;
+    iconClassName?: string;
+    isLoading?: boolean;
+    isActive?: boolean;
+    isDisabled?: boolean;
+    label: string;
+    variant?: Variant;
+    color?: Color;
+    size?: Size;
+};
+export declare const Button: import('react').ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/components/Button/index.es.js

@@ -0,0 +1,306 @@
+"use client";
+import { j as r } from "../../jsx-runtime-Tw_Kw2GZ.js";
+import { p as o } from "../../styled-components.browser.esm-D6kkzXl4.js";
+import { forwardRef as h } from "react";
+import { Loader as s } from "../Loader/index.es.js";
+const v = {
+  sm: {
+    height: "2rem",
+    gap: "0.25rem",
+    paddingLeft: "0.75rem",
+    paddingRight: "0.75rem",
+    fontSize: "0.75rem",
+    lineHeight: "1rem"
+  },
+  lg: {
+    height: "2.5rem",
+    paddingLeft: "2rem",
+    paddingRight: "2rem"
+  },
+  icon: {
+    padding: "0px"
+  }
+}, k = {
+  primary: {
+    "--tw-border-opacity": "1",
+    borderColor: "rgba(232, 121, 249, var(--tw-border-opacity))",
+    "--tw-bg-opacity": "1",
+    backgroundColor: "rgba(232, 121, 249, var(--tw-bg-opacity))",
+    "--tw-text-opacity": "1",
+    color: "rgba(232, 121, 249, var(--tw-text-opacity))",
+    "&:hover": {
+      "--tw-bg-opacity": "1",
+      backgroundColor: "rgba(197, 101, 212, var(--tw-bg-opacity))"
+    },
+    '&:where([data-theme="dark"], [data-theme="dark"] *)': {
+      "--tw-border-opacity": "1",
+      borderColor: "rgba(232, 121, 249, var(--tw-border-opacity))",
+      "--tw-bg-opacity": "1",
+      backgroundColor: "rgba(232, 121, 249, var(--tw-bg-opacity))",
+      "--tw-text-opacity": "1",
+      color: "rgba(232, 121, 249, var(--tw-text-opacity))"
+    },
+    '&:hover:where([data-theme="dark"], [data-theme="dark"] *)': {
+      "--tw-bg-opacity": "1",
+      backgroundColor: "rgba(241, 171, 252, var(--tw-bg-opacity))"
+    }
+  },
+  secondary: {
+    "--tw-border-opacity": "1",
+    borderColor: "rgba(255, 230, 109, var(--tw-border-opacity))",
+    "--tw-bg-opacity": "1",
+    backgroundColor: "rgba(255, 230, 109, var(--tw-bg-opacity))",
+    "--tw-text-opacity": "1",
+    color: "rgba(255, 230, 109, var(--tw-text-opacity))",
+    "&:hover": {
+      "--tw-bg-opacity": "1",
+      backgroundColor: "rgba(255, 216, 69, var(--tw-bg-opacity))"
+    },
+    '&:where([data-theme="dark"], [data-theme="dark"] *)': {
+      "--tw-border-opacity": "1",
+      borderColor: "rgba(255, 230, 109, var(--tw-border-opacity))",
+      "--tw-bg-opacity": "1",
+      backgroundColor: "rgba(255, 230, 109, var(--tw-bg-opacity))",
+      "--tw-text-opacity": "1",
+      color: "rgba(255, 230, 109, var(--tw-text-opacity))"
+    },
+    '&:hover:where([data-theme="dark"], [data-theme="dark"] *)': {
+      "--tw-bg-opacity": "1",
+      backgroundColor: "rgba(255, 246, 194, var(--tw-bg-opacity))"
+    }
+  },
+  destructive: {
+    "--tw-border-opacity": "1",
+    borderColor: "rgba(251, 125, 60, var(--tw-border-opacity))",
+    "--tw-bg-opacity": "1",
+    backgroundColor: "rgba(251, 125, 60, var(--tw-bg-opacity))",
+    "--tw-text-opacity": "1",
+    color: "rgba(251, 125, 60, var(--tw-text-opacity))",
+    "&:hover": {
+      "--tw-bg-opacity": "1",
+      backgroundColor: "rgba(249, 90, 22, var(--tw-bg-opacity))"
+    },
+    '&:where([data-theme="dark"], [data-theme="dark"] *)': {
+      "--tw-border-opacity": "1",
+      borderColor: "rgba(251, 125, 60, var(--tw-border-opacity))",
+      "--tw-bg-opacity": "1",
+      backgroundColor: "rgba(251, 125, 60, var(--tw-bg-opacity))"
+    },
+    '&:hover:where([data-theme="dark"], [data-theme="dark"] *)': {
+      "--tw-bg-opacity": "1",
+      backgroundColor: "rgba(254, 206, 170, var(--tw-bg-opacity))"
+    }
+  },
+  neutral: {
+    "--tw-border-opacity": "1",
+    borderColor: "rgba(93, 93, 93, var(--tw-border-opacity))",
+    "--tw-bg-opacity": "1",
+    backgroundColor: "rgba(93, 93, 93, var(--tw-bg-opacity))",
+    "--tw-text-opacity": "1",
+    color: "rgba(93, 93, 93, var(--tw-text-opacity))",
+    "&:hover": {
+      "--tw-bg-opacity": "1",
+      backgroundColor: "rgba(136, 136, 136, var(--tw-bg-opacity))"
+    },
+    '&:where([data-theme="dark"], [data-theme="dark"] *)': {
+      "--tw-border-opacity": "1",
+      borderColor: "rgba(136, 136, 136, var(--tw-border-opacity))",
+      "--tw-text-opacity": "1",
+      color: "rgba(136, 136, 136, var(--tw-text-opacity))"
+    },
+    '&:hover:where([data-theme="dark"], [data-theme="dark"] *)': {
+      "--tw-bg-opacity": "1",
+      backgroundColor: "rgba(109, 109, 109, var(--tw-bg-opacity))"
+    }
+  },
+  light: {
+    "--tw-border-opacity": "1",
+    borderColor: "rgba(255, 255, 255, var(--tw-border-opacity))",
+    "--tw-bg-opacity": "1",
+    backgroundColor: "rgba(255, 255, 255, var(--tw-bg-opacity))",
+    "--tw-text-opacity": "1",
+    color: "rgba(255, 255, 255, var(--tw-text-opacity))",
+    "&:hover": {
+      "--tw-bg-opacity": "1",
+      backgroundColor: "rgba(246, 246, 246, var(--tw-bg-opacity))"
+    }
+  },
+  dark: {
+    "--tw-border-opacity": "1",
+    borderColor: "rgba(69, 69, 69, var(--tw-border-opacity))",
+    "--tw-bg-opacity": "1",
+    backgroundColor: "rgba(69, 69, 69, var(--tw-bg-opacity))",
+    "--tw-text-opacity": "1",
+    color: "rgba(69, 69, 69, var(--tw-text-opacity))",
+    "&:hover": {
+      "--tw-bg-opacity": "1",
+      backgroundColor: "rgba(61, 61, 61, var(--tw-bg-opacity))"
+    },
+    '&:where([data-theme="dark"], [data-theme="dark"] *):hover': {
+      "--tw-bg-opacity": "1",
+      backgroundColor: "rgba(79, 79, 79, var(--tw-bg-opacity))"
+    }
+  },
+  text: {
+    "--tw-border-opacity": "1",
+    borderColor: "rgba(18, 18, 18, var(--tw-border-opacity))",
+    "--tw-bg-opacity": "1",
+    backgroundColor: "rgba(18, 18, 18, var(--tw-bg-opacity))",
+    "--tw-text-opacity": "1",
+    color: "rgba(18, 18, 18, var(--tw-text-opacity))",
+    '&:where([data-theme="dark"], [data-theme="dark"] *)': {
+      "--tw-border-opacity": "1",
+      borderColor: "rgba(255, 245, 237, var(--tw-border-opacity))",
+      "--tw-bg-opacity": "1",
+      backgroundColor: "rgba(255, 245, 237, var(--tw-bg-opacity))",
+      "--tw-text-opacity": "1",
+      color: "rgba(255, 245, 237, var(--tw-text-opacity))"
+    }
+  }
+}, m = {
+  default: {
+    borderRadius: "0.5rem",
+    "--tw-text-opacity": "1",
+    color: "rgba(255, 245, 237, var(--tw-text-opacity))",
+    '&:where([data-theme="dark"], [data-theme="dark"] *)': {
+      "--tw-text-opacity": "1",
+      color: "rgba(28, 28, 28, var(--tw-text-opacity))"
+    }
+  },
+  none: {
+    borderStyle: "none",
+    "--tw-bg-opacity": "0",
+    color: "inherit",
+    "&:hover": {
+      "--tw-bg-opacity": "0"
+    },
+    '&:where([data-theme="dark"], [data-theme="dark"] *)': {
+      "--tw-bg-opacity": "0",
+      color: "inherit"
+    },
+    '&:where([data-theme="dark"], [data-theme="dark"] *):hover': {
+      "--tw-bg-opacity": "0"
+    }
+  },
+  outline: {
+    borderRadius: "0.5rem",
+    borderWidth: "1.5px",
+    "--tw-bg-opacity": "0",
+    "&:hover": {
+      "--tw-bg-opacity": "0.3"
+    },
+    '&:where([data-theme="dark"], [data-theme="dark"] *)': {
+      "--tw-bg-opacity": "0"
+    }
+  },
+  link: {
+    height: "auto",
+    justifyContent: "flex-start",
+    borderColor: "inherit",
+    backgroundColor: "transparent",
+    padding: "0px",
+    textUnderlineOffset: "4px",
+    "&:hover": {
+      backgroundColor: "transparent",
+      textDecorationLine: "underline"
+    },
+    '&:where([data-theme="dark"], [data-theme="dark"] *)': {
+      backgroundColor: "transparent"
+    }
+  },
+  "invisible-link": {
+    height: "auto",
+    justifyContent: "flex-start",
+    borderColor: "inherit",
+    backgroundColor: "transparent",
+    padding: "0px",
+    textUnderlineOffset: "4px",
+    "&:hover": {
+      backgroundColor: "transparent"
+    },
+    '&:where([data-theme="dark"], [data-theme="dark"] *)': {
+      backgroundColor: "transparent"
+    }
+  }
+}, u = o.button`
+  ${{
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: "0.5rem",
+  whiteSpace: "nowrap",
+  fontSize: "0.875rem",
+  lineHeight: "1.25rem",
+  fontWeight: "500",
+  transitionProperty: "color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter",
+  transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
+  transitionDuration: "150ms",
+  "&:focus-visible": {
+    outline: "2px solid transparent",
+    outlineOffset: "2px"
+  },
+  "&:disabled": {
+    pointerEvents: "none",
+    opacity: "0.5"
+  }
+}}
+  ${({
+  $size: t
+}) => v[t]}
+  ${({
+  $color: t
+}) => k[t]}
+  ${({
+  $variant: t
+}) => m[t]}
+`, x = {
+  sm: {
+    width: "0.75rem"
+  },
+  lg: {
+    width: "1.25rem"
+  },
+  icon: {
+    width: "1.5rem"
+  }
+}, C = ({
+  Icon: t,
+  isLoading: a,
+  ...e
+}) => a ? /* @__PURE__ */ r.jsx(s, { ...e }) : t && /* @__PURE__ */ r.jsx(t, {}), f = o.div({
+  display: "flex",
+  width: "100%",
+  flexDirection: "row"
+}), j = o.div({
+  display: "flex",
+  width: "100%",
+  flexDirection: "row",
+  alignItems: "center",
+  justifyContent: "center"
+}), S = o(C)(({
+  $size: t
+}) => [x[t], {
+  alignSelf: "flex-start"
+}]), $ = h(({
+  variant: t = "none",
+  size: a = "sm",
+  color: e = "primary",
+  children: c,
+  Icon: d,
+  iconClassName: b,
+  isLoading: i = !1,
+  isActive: n,
+  disabled: g,
+  label: p,
+  ...w
+}, y) => {
+  const l = t === "link" || t === "invisible-link";
+  return /* @__PURE__ */ r.jsx(u, { ref: y, disabled: i ?? g, "aria-current": n, "aria-label": p, "aria-busy": i, role: l ? "link" : void 0, $variant: t, $color: e, $size: a, ...w, children: d ? /* @__PURE__ */ r.jsxs(f, { children: [
+    /* @__PURE__ */ r.jsx(S, { className: b, $size: a, isLoading: i, Icon: d }),
+    /* @__PURE__ */ r.jsx(j, { children: c })
+  ] }) : c });
+});
+$.displayName = "Button";
+export {
+  $ as Button
+};

package/dist/components/Container/index.cjs.js

@@ -0,0 +1,7 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("../../jsx-runtime-D6agescH.cjs"),p=require("react"),t=require("../../styled-components.browser.esm-GqWwDlfY.cjs"),l=t.pt.div(()=>[{display:"flex",flexDirection:"column",justifyContent:"space-between","--tw-shadow":"0 1px 2px 0 rgb(0 0 0 / 0.05)","--tw-shadow-colored":"0 1px 2px 0 var(--tw-shadow-color)",boxShadow:"var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)","--tw-backdrop-blur":"blur(8px)",backdropFilter:"var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)"},t.ct`
+    -webkit-backdrop-filter: var(--tw-backdrop-blur)
+      var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
+      var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
+      var(--tw-backdrop-invert) var(--tw-backdrop-opacity)
+      var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+  `]),h={none:{borderRadius:"0px"},sm:{borderRadius:"0.125rem"},md:{borderRadius:"0.375rem"},lg:{borderRadius:"0.5rem"},xl:{borderRadius:"0.75rem"},"2xl":{borderRadius:"1rem"},"3xl":{borderRadius:"1.5rem"},full:{borderRadius:"9999px"}},w={none:{"--tw-bg-opacity":"1",backgroundColor:"rgba(231, 231, 231, var(--tw-bg-opacity))",'&:where([data-theme="dark"], [data-theme="dark"] *)':{"--tw-bg-opacity":"1",backgroundColor:"rgba(69, 69, 69, var(--tw-bg-opacity))"}},sm:{backgroundColor:"rgba(231, 231, 231, 0.8)",'&:where([data-theme="dark"], [data-theme="dark"] *)':{backgroundColor:"rgba(69, 69, 69, 0.8)"}},md:{backgroundColor:"rgba(231, 231, 231, 0.6)",'&:where([data-theme="dark"], [data-theme="dark"] *)':{backgroundColor:"rgba(69, 69, 69, 0.6)"}},lg:{backgroundColor:"rgba(231, 231, 231, 0.4)",'&:where([data-theme="dark"], [data-theme="dark"] *)':{backgroundColor:"rgba(69, 69, 69, 0.4)"}},xl:{backgroundColor:"rgba(231, 231, 231, 0.2)",'&:where([data-theme="dark"], [data-theme="dark"] *)':{backgroundColor:"rgba(69, 69, 69, 0.2)"}}},v={none:{padding:"0px"},sm:{padding:"0.25rem"},md:{padding:"0.5rem"},lg:{padding:"0.75rem"},xl:{padding:"1rem"}},g={without:{},x:{"> :not([hidden]) ~ :not([hidden])":{"--tw-divide-x-reverse":"0",borderRightWidth:"calc(1px * var(--tw-divide-x-reverse))",borderLeftWidth:"calc(1px * calc(1 - var(--tw-divide-x-reverse)))",borderStyle:"dashed",borderColor:"rgba(18, 18, 18, 0.2)"},'&:where([data-theme="dark"], [data-theme="dark"] *) > :not([hidden]) ~ :not([hidden])':{borderColor:"rgba(255, 245, 237, 0.2)"}},y:{"> :not([hidden]) ~ :not([hidden])":{"--tw-divide-y-reverse":"0",borderTopWidth:"calc(1px * calc(1 - var(--tw-divide-y-reverse)))",borderBottomWidth:"calc(1px * var(--tw-divide-y-reverse))",borderStyle:"dashed",borderColor:"rgba(18, 18, 18, 0.2)"},'&:where([data-theme="dark"], [data-theme="dark"] *) > :not([hidden]) ~ :not([hidden])':{borderColor:"rgba(255, 245, 237, 0.2)"}},both:{"> :not([hidden]) ~ :not([hidden])":{"--tw-divide-x-reverse":"0",borderRightWidth:"calc(1px * var(--tw-divide-x-reverse))",borderLeftWidth:"calc(1px * calc(1 - var(--tw-divide-x-reverse)))","--tw-divide-y-reverse":"0",borderTopWidth:"calc(1px * calc(1 - var(--tw-divide-y-reverse)))",borderBottomWidth:"calc(1px * var(--tw-divide-y-reverse))",borderStyle:"dashed",borderColor:"rgba(18, 18, 18, 0.2)"},'&:where([data-theme="dark"], [data-theme="dark"] *) > :not([hidden]) ~ :not([hidden])':{borderColor:"rgba(255, 245, 237, 0.2)"}}},o=({$roundedSize:r="md",$transparency:e="md",$padding:a="none",$separator:d="without"})=>[h[r],w[e],v[a],g[d]],k=t.pt(l)(o),i=p.forwardRef(({children:r,roundedSize:e,padding:a,transparency:d,separator:n,...b},c)=>s.jsxRuntimeExports.jsx(k,{ref:c,$roundedSize:e,$padding:a,$transparency:d,$separator:n,...b,children:r}));i.displayName="Container";exports.Container=i;exports.getContainerStyles=o;

package/dist/components/Container/index.d.ts

@@ -0,0 +1,23 @@
+import { HTMLAttributes } from 'react';
+import { TwStyle } from 'twin.macro';
+
+type RoundedSize = 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full';
+type Transparency = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+type Padding = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+type Separator = 'without' | 'x' | 'y' | 'both';
+type ContainerStyleProps = {
+    $roundedSize?: RoundedSize;
+    $transparency?: Transparency;
+    $padding?: Padding;
+    $separator?: Separator;
+};
+export declare const getContainerStyles: ({ $roundedSize, $transparency, $padding, $separator, }: ContainerStyleProps) => TwStyle[];
+export declare const Container: import('react').ForwardRefExoticComponent<{
+    roundedSize?: RoundedSize;
+    transparency?: Transparency;
+    padding?: Padding;
+    separator?: Separator;
+} & {
+    children?: import('react').ReactNode | undefined;
+} & HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/Container/index.es.js

@@ -0,0 +1,152 @@
+"use client";
+import { j as b } from "../../jsx-runtime-Tw_Kw2GZ.js";
+import { forwardRef as c } from "react";
+import { p as t, c as s } from "../../styled-components.browser.esm-D6kkzXl4.js";
+const p = t.div(() => [{
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "space-between",
+  "--tw-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+  "--tw-shadow-colored": "0 1px 2px 0 var(--tw-shadow-color)",
+  boxShadow: "var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)",
+  "--tw-backdrop-blur": "blur(8px)",
+  backdropFilter: "var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)"
+}, s`
+    -webkit-backdrop-filter: var(--tw-backdrop-blur)
+      var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
+      var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
+      var(--tw-backdrop-invert) var(--tw-backdrop-opacity)
+      var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+  `]), h = {
+  none: {
+    borderRadius: "0px"
+  },
+  sm: {
+    borderRadius: "0.125rem"
+  },
+  md: {
+    borderRadius: "0.375rem"
+  },
+  lg: {
+    borderRadius: "0.5rem"
+  },
+  xl: {
+    borderRadius: "0.75rem"
+  },
+  "2xl": {
+    borderRadius: "1rem"
+  },
+  "3xl": {
+    borderRadius: "1.5rem"
+  },
+  full: {
+    borderRadius: "9999px"
+  }
+}, w = {
+  none: {
+    "--tw-bg-opacity": "1",
+    backgroundColor: "rgba(231, 231, 231, var(--tw-bg-opacity))",
+    '&:where([data-theme="dark"], [data-theme="dark"] *)': {
+      "--tw-bg-opacity": "1",
+      backgroundColor: "rgba(69, 69, 69, var(--tw-bg-opacity))"
+    }
+  },
+  sm: {
+    backgroundColor: "rgba(231, 231, 231, 0.8)",
+    '&:where([data-theme="dark"], [data-theme="dark"] *)': {
+      backgroundColor: "rgba(69, 69, 69, 0.8)"
+    }
+  },
+  md: {
+    backgroundColor: "rgba(231, 231, 231, 0.6)",
+    '&:where([data-theme="dark"], [data-theme="dark"] *)': {
+      backgroundColor: "rgba(69, 69, 69, 0.6)"
+    }
+  },
+  lg: {
+    backgroundColor: "rgba(231, 231, 231, 0.4)",
+    '&:where([data-theme="dark"], [data-theme="dark"] *)': {
+      backgroundColor: "rgba(69, 69, 69, 0.4)"
+    }
+  },
+  xl: {
+    backgroundColor: "rgba(231, 231, 231, 0.2)",
+    '&:where([data-theme="dark"], [data-theme="dark"] *)': {
+      backgroundColor: "rgba(69, 69, 69, 0.2)"
+    }
+  }
+}, l = {
+  none: {
+    padding: "0px"
+  },
+  sm: {
+    padding: "0.25rem"
+  },
+  md: {
+    padding: "0.5rem"
+  },
+  lg: {
+    padding: "0.75rem"
+  },
+  xl: {
+    padding: "1rem"
+  }
+}, v = {
+  without: {},
+  x: {
+    "> :not([hidden]) ~ :not([hidden])": {
+      "--tw-divide-x-reverse": "0",
+      borderRightWidth: "calc(1px * var(--tw-divide-x-reverse))",
+      borderLeftWidth: "calc(1px * calc(1 - var(--tw-divide-x-reverse)))",
+      borderStyle: "dashed",
+      borderColor: "rgba(18, 18, 18, 0.2)"
+    },
+    '&:where([data-theme="dark"], [data-theme="dark"] *) > :not([hidden]) ~ :not([hidden])': {
+      borderColor: "rgba(255, 245, 237, 0.2)"
+    }
+  },
+  y: {
+    "> :not([hidden]) ~ :not([hidden])": {
+      "--tw-divide-y-reverse": "0",
+      borderTopWidth: "calc(1px * calc(1 - var(--tw-divide-y-reverse)))",
+      borderBottomWidth: "calc(1px * var(--tw-divide-y-reverse))",
+      borderStyle: "dashed",
+      borderColor: "rgba(18, 18, 18, 0.2)"
+    },
+    '&:where([data-theme="dark"], [data-theme="dark"] *) > :not([hidden]) ~ :not([hidden])': {
+      borderColor: "rgba(255, 245, 237, 0.2)"
+    }
+  },
+  both: {
+    "> :not([hidden]) ~ :not([hidden])": {
+      "--tw-divide-x-reverse": "0",
+      borderRightWidth: "calc(1px * var(--tw-divide-x-reverse))",
+      borderLeftWidth: "calc(1px * calc(1 - var(--tw-divide-x-reverse)))",
+      "--tw-divide-y-reverse": "0",
+      borderTopWidth: "calc(1px * calc(1 - var(--tw-divide-y-reverse)))",
+      borderBottomWidth: "calc(1px * var(--tw-divide-y-reverse))",
+      borderStyle: "dashed",
+      borderColor: "rgba(18, 18, 18, 0.2)"
+    },
+    '&:where([data-theme="dark"], [data-theme="dark"] *) > :not([hidden]) ~ :not([hidden])': {
+      borderColor: "rgba(255, 245, 237, 0.2)"
+    }
+  }
+}, g = ({
+  $roundedSize: r = "md",
+  $transparency: a = "md",
+  $padding: e = "none",
+  $separator: d = "without"
+}) => [h[r], w[a], l[e], v[d]], k = t(p)(g), m = c(({
+  children: r,
+  roundedSize: a,
+  padding: e,
+  transparency: d,
+  separator: o,
+  ...i
+}, n) => /* @__PURE__ */ b.jsx(k, { ref: n, $roundedSize: a, $padding: e, $transparency: d, $separator: o, ...i, children: r }));
+m.displayName = "Container";
+export {
+  m as Container,
+  g as getContainerStyles
+};

package/dist/components/ContentEditor/ContentEditor.cjs.js

@@ -0,0 +1,5 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../jsx-runtime-D6agescH.cjs"),s=require("../../styled-components.browser.esm-GqWwDlfY.cjs"),l=require("react"),y=require("../../check-rhNgx2ZQ.cjs"),m=require("../../x-DIXoN4xe.cjs"),k=s.pt.div`
+  ${{margin:"0.75rem",display:"inline",width:"100%",backgroundColor:"transparent",outline:"2px solid transparent",outlineOffset:"2px"}}
+  word-break: break-word;
+  ${({$isEditing:t})=>t?{cursor:"text"}:{cursor:"pointer"}}
+`,c=s.pt.div({display:"flex",flexDirection:"row",alignItems:"center",justifyContent:"space-between",gap:"0.5rem"}),C=s.pt(y.Check)({cursor:"pointer","&:hover":{"--tw-scale-x":"1.1","--tw-scale-y":"1.1",transform:"translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))"}}),j=s.pt(m.X)({cursor:"pointer","&:hover":{"--tw-scale-x":"1.1","--tw-scale-y":"1.1",transform:"translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))"}}),b=({children:t,onContentChange:i,isEditing:n})=>{const[a,o]=l.useState(t),[w,x]=l.useState(0),u=a!==t,d=()=>{o(t),x(r=>r+1)},p=()=>{i(a)},v=r=>o(r.currentTarget.textContent??"");return e.jsxRuntimeExports.jsxs(c,{children:[e.jsxRuntimeExports.jsx(k,{role:"textbox",contentEditable:n,onInput:v,suppressContentEditableWarning:!0,$isEditing:n??!1,children:t},w),u&&e.jsxRuntimeExports.jsxs(c,{children:[e.jsxRuntimeExports.jsx(C,{size:16,onClick:p}),e.jsxRuntimeExports.jsx(j,{size:16,onClick:d})]})]})};exports.ContentEditor=b;

package/dist/components/ContentEditor/ContentEditor.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+
+export type ContentEditorProps = {
+    children: string;
+    onContentChange: (content: string) => void;
+    isEditing?: boolean;
+};
+export declare const ContentEditor: FC<ContentEditorProps>;

package/dist/components/ContentEditor/ContentEditor.es.js

@@ -0,0 +1,75 @@
+"use client";
+import { j as e } from "../../jsx-runtime-Tw_Kw2GZ.js";
+import { p as r } from "../../styled-components.browser.esm-D6kkzXl4.js";
+import { useState as l } from "react";
+import { C as u } from "../../check-BLEiR8OY.js";
+import { X as y } from "../../x-BKwnSvvj.js";
+const k = r.div`
+  ${{
+  margin: "0.75rem",
+  display: "inline",
+  width: "100%",
+  backgroundColor: "transparent",
+  outline: "2px solid transparent",
+  outlineOffset: "2px"
+}}
+  word-break: break-word;
+  ${({
+  $isEditing: t
+}) => t ? {
+  cursor: "text"
+} : {
+  cursor: "pointer"
+}}
+`, c = r.div({
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center",
+  justifyContent: "space-between",
+  gap: "0.5rem"
+}), C = r(u)({
+  cursor: "pointer",
+  "&:hover": {
+    "--tw-scale-x": "1.1",
+    "--tw-scale-y": "1.1",
+    transform: "translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))"
+  }
+}), f = r(y)({
+  cursor: "pointer",
+  "&:hover": {
+    "--tw-scale-x": "1.1",
+    "--tw-scale-y": "1.1",
+    transform: "translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))"
+  }
+}), E = ({
+  children: t,
+  onContentChange: i,
+  isEditing: a
+}) => {
+  const [n, o] = l(t), [w, x] = l(0), p = n !== t, d = () => {
+    o(t), x((s) => s + 1);
+  }, m = () => {
+    i(n);
+  }, v = (s) => o(s.currentTarget.textContent ?? "");
+  return /* @__PURE__ */ e.jsxs(c, { children: [
+    /* @__PURE__ */ e.jsx(
+      k,
+      {
+        role: "textbox",
+        contentEditable: a,
+        onInput: v,
+        suppressContentEditableWarning: !0,
+        $isEditing: a ?? !1,
+        children: t
+      },
+      w
+    ),
+    p && /* @__PURE__ */ e.jsxs(c, { children: [
+      /* @__PURE__ */ e.jsx(C, { size: 16, onClick: m }),
+      /* @__PURE__ */ e.jsx(f, { size: 16, onClick: d })
+    ] })
+  ] });
+};
+export {
+  E as ContentEditor
+};

package/dist/components/ContentEditor/index.cjs.js

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./ContentEditor.cjs.js");exports.ContentEditor=t.ContentEditor;

package/dist/components/ContentEditor/index.d.ts

@@ -0,0 +1 @@
+export * from './ContentEditor';

package/dist/components/ContentEditor/index.es.js

@@ -0,0 +1,5 @@
+"use client";
+import { ContentEditor as o } from "./ContentEditor.es.js";
+export {
+  o as ContentEditor
+};

package/dist/components/ContentSelector/ContentSelector.cjs.js

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../jsx-runtime-D6agescH.cjs"),i=require("../Popover/index.cjs.js"),c=require("../PressableDiv/PressableDiv.cjs.js"),l=({children:s,onSelect:t,onUnselect:o,isSelecting:n,popoverContent:r="Long press"})=>e.jsxRuntimeExports.jsx(i.Popover,{content:r,children:e.jsxRuntimeExports.jsx(c.PressableDiv,{onPress:t,onClickOutside:o,isSelecting:n,children:s})});exports.ContentSelector=l;

package/dist/components/ContentSelector/ContentSelector.d.ts

@@ -0,0 +1,11 @@
+import { FC, ReactNode } from 'react';
+
+type ContentSelectorProps = {
+    children: ReactNode;
+    onSelect: () => void;
+    onUnselect?: () => void;
+    isSelecting?: boolean;
+    popoverContent?: string;
+};
+export declare const ContentSelector: FC<ContentSelectorProps>;
+export {};

package/dist/components/ContentSelector/ContentSelector.es.js

@@ -0,0 +1,14 @@
+"use client";
+import { j as o } from "../../jsx-runtime-Tw_Kw2GZ.js";
+import { Popover as i } from "../Popover/index.es.js";
+import { PressableDiv as m } from "../PressableDiv/PressableDiv.es.js";
+const x = ({
+  children: e,
+  onSelect: r,
+  onUnselect: s,
+  isSelecting: t,
+  popoverContent: n = "Long press"
+}) => /* @__PURE__ */ o.jsx(i, { content: n, children: /* @__PURE__ */ o.jsx(m, { onPress: r, onClickOutside: s, isSelecting: t, children: e }) });
+export {
+  x as ContentSelector
+};

package/dist/components/ContentSelector/index.cjs.js

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./ContentSelector.cjs.js");exports.ContentSelector=e.ContentSelector;

package/dist/components/ContentSelector/index.d.ts

@@ -0,0 +1 @@
+export * from './ContentSelector';

package/dist/components/ContentSelector/index.es.js

@@ -0,0 +1,5 @@
+"use client";
+import { ContentSelector as o } from "./ContentSelector.es.js";
+export {
+  o as ContentSelector
+};