@dotss/ui 0.0.4 → 0.0.7

package/dist/IconButton/IconButton.es.js

@@ -0,0 +1,312 @@
+import { jsx as d } from "@emotion/react/jsx-runtime";
+import { forwardRef as b } from "react";
+import u from "../Icon/Icon.es.js";
+import m from "../hooks/useCheckHoverPossible/useCheckHoverPossible.es.js";
+import g from "../utils/getIconLabel/getIconLabel.es.js";
+import c from "@emotion/styled";
+import k from "../utils/getContrastingTextColor/getContrastingTextColor.es.js";
+const v = c.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 100px;
+
+  ${({ theme: { spacing: e }, size: r }) => {
+  let i = {
+    width: 40,
+    height: 40,
+    padding: e.content(1)
+  };
+  switch (r) {
+    case "2xLarge":
+      i = {
+        width: 80,
+        height: 80,
+        padding: 0
+      };
+      break;
+    case "xLarge":
+      i = {
+        width: 56,
+        height: 56,
+        padding: e.content(0.5)
+      };
+      break;
+    case "large":
+      i = {
+        width: 48,
+        height: 48,
+        padding: e.content(1)
+      };
+      break;
+    case "small":
+      i = {
+        width: 32,
+        height: 32,
+        padding: e.content(1)
+      };
+      break;
+    case "xSmall":
+      i = {
+        width: 24,
+        height: 24,
+        padding: e.content(0.5)
+      };
+      break;
+  }
+  return i;
+}};
+
+  ${({
+  theme: {
+    palette: { yellow: e, grey: r }
+  },
+  variant: i,
+  color: a,
+  isHoverPossible: t
+}) => {
+  let o = {
+    '&:not([aria-disabled="true"]):active > div': { backgroundColor: r[10] },
+    ...t ? { '&:not([aria-disabled="true"]):hover > div': { backgroundColor: r[10] } } : {}
+  };
+  switch (i) {
+    case "standard":
+      a === "tertiary" && (o = {
+        '&:not([aria-disabled="true"]):active > div': { backgroundColor: r[80] },
+        ...t ? { '&:not([aria-disabled="true"]):hover > div': { backgroundColor: r[80] } } : {}
+      });
+      break;
+    case "filled":
+      a === "primary" && (o = {
+        '&:not([aria-disabled="true"]):active > div': { backgroundColor: e[80] },
+        ...t ? { '&:not([aria-disabled="true"]):hover > div': { backgroundColor: e[80] } } : {}
+      }), a === "secondary" && (o = {
+        '&:not([aria-disabled="true"]):active > div': { backgroundColor: r[100] },
+        ...t ? { '&:not([aria-disabled="true"]):hover > div': { backgroundColor: r[100] } } : {}
+      });
+      break;
+    case "outlined":
+      a === "primary" && (o = {
+        '&:not([aria-disabled="true"]):active > div': { backgroundColor: r[10] },
+        ...t ? { '&:not([aria-disabled="true"]):hover > div': { backgroundColor: r[10] } } : {}
+      }), a === "tertiary" && (o = {
+        '&:not([aria-disabled="true"]):active > div': { backgroundColor: r[100] },
+        ...t ? { '&:not([aria-disabled="true"]):hover > div': { backgroundColor: r[100] } } : {}
+      });
+      break;
+  }
+  return o;
+}};
+
+  &[aria-disabled='true'] {
+    cursor: not-allowed;
+
+    & > div {
+      ${({
+  theme: {
+    palette: { brand: e, grey: r }
+  },
+  variant: i,
+  color: a
+}) => {
+  let t = {
+    backgroundColor: "transparent",
+    "& svg": {
+      color: r[30]
+    }
+  };
+  switch (i) {
+    case "standard":
+      a === "tertiary" && (t = {
+        backgroundColor: "transparent",
+        "& svg": {
+          color: r[80]
+        }
+      });
+      break;
+    case "filled":
+      a === "primary" && (t = {
+        backgroundColor: e.primary.disable,
+        "& svg": {
+          color: r[30]
+        }
+      }), a === "secondary" && (t = {
+        backgroundColor: r[10],
+        "& svg": {
+          color: r[30]
+        }
+      });
+      break;
+    case "outlined":
+      a === "secondary" && (t = {
+        backgroundColor: r[10],
+        borderColor: r[30],
+        "& svg": {
+          color: r[30]
+        }
+      }), a === "tertiary" && (t = {
+        backgroundColor: r[80],
+        borderColor: r[70],
+        "& svg": {
+          color: r[70]
+        }
+      });
+      break;
+  }
+  return t;
+}};
+    }
+  }
+`, f = c.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  border: 1px solid transparent;
+  border-radius: 100px;
+
+  ${({
+  theme: {
+    palette: { brand: e, grey: r }
+  },
+  variant: i,
+  color: a
+}) => {
+  let t = {
+    backgroundColor: "transparent"
+  };
+  switch (i) {
+    case "standard":
+      a === "tertiary" && (t = {
+        backgroundColor: "transparent",
+        "& svg": {
+          color: r.white
+        }
+      });
+      break;
+    case "filled":
+      a === "primary" && (t = {
+        backgroundColor: e.primary.main,
+        color: k(e.primary.main, [r.white, r[100]]),
+        "& svg": {
+          color: "inherit"
+        }
+      }), a === "secondary" && (t = {
+        backgroundColor: e.secondary,
+        color: r.white,
+        "& svg": {
+          color: "inherit"
+        }
+      });
+      break;
+    case "outlined":
+      a === "primary" && (t = {
+        backgroundColor: r.white,
+        borderColor: r[50]
+      }), a === "tertiary" && (t = {
+        backgroundColor: "transparent",
+        borderColor: r[50],
+        "& svg": {
+          color: r[50]
+        }
+      });
+      break;
+  }
+  return t;
+}};
+
+  ${({ size: e }) => {
+  let r = {
+    minWidth: 32,
+    minHeight: 32,
+    "& svg": {
+      width: 24,
+      height: 24
+    }
+  };
+  switch (e) {
+    case "2xLarge":
+      r = {
+        minWidth: 80,
+        minHeight: 80,
+        borderWidth: 2,
+        "& svg": {
+          width: 48,
+          height: 48
+        }
+      };
+      break;
+    case "xLarge":
+      r = {
+        minWidth: 52,
+        minHeight: 52,
+        "& svg": {
+          width: 36,
+          height: 36
+        }
+      };
+      break;
+    case "large":
+      r = {
+        minWidth: 40,
+        minHeight: 40,
+        "& svg": {
+          width: 32,
+          height: 32
+        }
+      };
+      break;
+    case "small":
+      r = {
+        minWidth: 24,
+        minHeight: 24,
+        "& svg": {
+          width: 16,
+          height: 16
+        }
+      };
+      break;
+    case "xSmall":
+      r = {
+        minWidth: 20,
+        minHeight: 20,
+        "& svg": {
+          width: 16,
+          height: 16
+        }
+      };
+      break;
+  }
+  return r;
+}};
+`, L = b(function({
+  name: r,
+  variant: i = "standard",
+  size: a = "medium",
+  color: t = "primary",
+  inlineCSS: o,
+  disabled: n = !1,
+  ...s
+}, l) {
+  const { isHoverPossible: h } = m();
+  return /* @__PURE__ */ d(
+    v,
+    {
+      ref: l,
+      variant: i,
+      size: a,
+      color: t,
+      "aria-disabled": n,
+      "aria-label": g(r),
+      isHoverPossible: h,
+      disabled: n,
+      ...s,
+      css: o,
+      children: /* @__PURE__ */ d(f, { variant: i, size: a, color: t, children: /* @__PURE__ */ d(u, { name: r, focusable: !1 }) })
+    }
+  );
+});
+export {
+  L as default
+};

package/dist/IconButton/IconButton.stories.d.ts

@@ -0,0 +1,15 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./IconButton').IconButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Standard: Story;
+export declare const Filled: Story;
+export declare const Outlined: Story;

package/dist/IconButton/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./IconButton.cjs");exports.default=e.default;

package/dist/IconButton/index.d.ts

@@ -0,0 +1,3 @@
+import { default as IconButton } from './IconButton';
+
+export default IconButton;

package/dist/IconButton/index.es.js

@@ -0,0 +1,4 @@
+import t from "./IconButton.es.js";
+export {
+  t as default
+};

package/dist/Label/Label.cjs

@@ -0,0 +1,16 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@emotion/react/jsx-runtime"),R=require("react"),_=require("@emotion/styled"),j=require("../utils/getContrastingTextColor/getContrastingTextColor.cjs"),A=a=>a&&a.__esModule?a:{default:a},z=A(_),q=z.default.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${({theme:{spacing:a}})=>a.content(1)}px;
+  border: 1px solid transparent;
+  & svg {
+    color: inherit;
+  }
+
+  ${({theme:{palette:{yellow:a,blue:u,green:s,pink:c,grey:i,etc:b,extend:o}},variant:g,color:l})=>{var f,t,h,C,n,k,p,m,w,T,S,v,H,d,M;let r={backgroundColor:a[70],color:j.default(a[70],[i.white,i[100]])};switch(g){case"solid":l==="blue"&&(r={backgroundColor:u[80],color:i.white}),l==="green"&&(r={backgroundColor:s[80],color:i.white}),l==="pink"&&(r={backgroundColor:c[80],color:i.white}),l==="orange"&&(r={backgroundColor:b.orange,color:i.white}),l==="play"&&(r={backgroundColor:(f=o==null?void 0:o.classType)==null?void 0:f.play,color:i[70]}),l==="commute"&&(r={backgroundColor:(t=o==null?void 0:o.classType)==null?void 0:t.commute,color:i[70]}),l==="learning"&&(r={backgroundColor:(h=o==null?void 0:o.classType)==null?void 0:h.learning,color:i[70]}),l==="english"&&(r={backgroundColor:(C=o==null?void 0:o.classType)==null?void 0:C.english,color:i[70]}),l==="creativeArt"&&(r={backgroundColor:(n=o==null?void 0:o.classType)==null?void 0:n.creativeArt,color:i[70]}),l==="grey"&&(r={backgroundColor:i[90],color:i.white});break;case"ghost":l==="yellow"&&(r={backgroundColor:a[20],color:a[100]}),l==="blue"&&(r={backgroundColor:u[10],color:u[90]}),l==="green"&&(r={backgroundColor:s[10],color:s[80]}),l==="pink"&&(r={backgroundColor:c[10],color:c[70]}),l==="orange"&&(r={backgroundColor:a[20],color:b.orange}),l==="play"&&(r={backgroundColor:(k=o==null?void 0:o.classType)==null?void 0:k.play,color:i[70]}),l==="commute"&&(r={backgroundColor:(p=o==null?void 0:o.classType)==null?void 0:p.commute,color:i[70]}),l==="learning"&&(r={backgroundColor:(m=o==null?void 0:o.classType)==null?void 0:m.learning,color:i[70]}),l==="english"&&(r={backgroundColor:(w=o==null?void 0:o.classType)==null?void 0:w.english,color:i[70]}),l==="creativeArt"&&(r={backgroundColor:(T=o==null?void 0:o.classType)==null?void 0:T.creativeArt,color:i[70]}),l==="grey"&&(r={backgroundColor:i[10],color:i[60]});break;case"outlined":l==="yellow"&&(r={backgroundColor:i.white,borderColor:a[60],color:a[100]}),l==="blue"&&(r={backgroundColor:i.white,borderColor:u[40],color:u[100]}),l==="green"&&(r={backgroundColor:i.white,borderColor:s[50],color:s[100]}),l==="pink"&&(r={backgroundColor:i.white,borderColor:c[50],color:c[100]}),l==="orange"&&(r={backgroundColor:i.white,borderColor:b.orange,color:b.orange}),l==="play"&&(r={backgroundColor:i.white,borderColor:(S=o==null?void 0:o.classType)==null?void 0:S.play,color:i[70]}),l==="commute"&&(r={backgroundColor:i.white,borderColor:(v=o==null?void 0:o.classType)==null?void 0:v.commute,color:i[70]}),l==="learning"&&(r={backgroundColor:i.white,borderColor:(H=o==null?void 0:o.classType)==null?void 0:H.learning,color:i[70]}),l==="english"&&(r={backgroundColor:i.white,borderColor:(d=o==null?void 0:o.classType)==null?void 0:d.english,color:i[70]}),l==="creativeArt"&&(r={backgroundColor:i.white,borderColor:(M=o==null?void 0:o.classType)==null?void 0:M.creativeArt,color:i[70]}),l==="grey"&&(r={backgroundColor:i.white,borderColor:i[50],color:i[70]});break}return r}};
+
+  ${({theme:{typography:a},size:u})=>{let s={padding:"7px 9px",maxHeight:32,borderRadius:8,fontSize:a.c1M.size,fontWeight:a.c1M.weight,lineHeight:a.c1M.lineHeight,letterSpacing:a.c1M.letterSpacing,"& svg":{width:20,height:20}};if(u==="small"){const{c3M:c}=a;s={padding:"4px 7px",maxHeight:24,borderRadius:6,fontSize:c.size,fontWeight:c.weight,lineHeight:c.lineHeight,letterSpacing:c.letterSpacing,"& svg":{width:16,height:16}}}if(u==="xSmall"){const{c5B:c}=a;s={padding:"2px 3px",maxHeight:16,borderRadius:4,fontSize:c.size,fontWeight:c.weight,lineHeight:c.lineHeight,letterSpacing:c.letterSpacing,"& svg":{width:12,height:12}}}return s}};
+
+  ${({rounded:a})=>a?{borderRadius:99}:null};
+`,$=R.forwardRef(function({children:u,tag:s,variant:c="solid",size:i="medium",color:b="yellow",startAdornment:o,endAdornment:g,rounded:l,inlineCSS:r,...f},t){return e.jsxs(q,{ref:t,as:s,variant:c,size:i,color:b,rounded:l,...f,css:r,children:[o,u,g]})});exports.default=$;

package/dist/Label/Label.d.ts

@@ -0,0 +1,17 @@
+import { ElementType, ReactNode } from 'react';
+import { SpecifyColorScaleKey } from '../typings/color';
+import { PolymorphicComponentProps, Size, Variant } from '../typings/component';
+import { EtcColorKey } from '../typings/theme/core';
+import { TictoccrocBrandColorKey, TictoccrocClassTypeColorKey } from '../typings/theme/tictoccroc';
+
+export type LabelProps<T extends ElementType = 'span'> = PolymorphicComponentProps<T> & {
+    variant?: Extract<Variant, 'solid' | 'ghost' | 'outlined'>;
+    size?: Extract<Size, 'xSmall' | 'small' | 'medium'>;
+    color?: TictoccrocBrandColorKey | Exclude<TictoccrocClassTypeColorKey, 'package'> | Extract<EtcColorKey, 'orange'> | Extract<SpecifyColorScaleKey, 'grey'>;
+    startAdornment?: ReactNode;
+    endAdornment?: ReactNode;
+    rounded?: boolean;
+};
+type LabelComponent<DT extends ElementType> = <T extends ElementType = DT>(props: LabelProps<T>) => ReactNode;
+declare const Label: LabelComponent<'span'>;
+export default Label;

package/dist/Label/Label.es.js

@@ -0,0 +1,233 @@
+import { jsxs as M } from "@emotion/react/jsx-runtime";
+import { forwardRef as R } from "react";
+import j from "@emotion/styled";
+import $ from "../utils/getContrastingTextColor/getContrastingTextColor.es.js";
+const L = j.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${({ theme: { spacing: a } }) => a.content(1)}px;
+  border: 1px solid transparent;
+  & svg {
+    color: inherit;
+  }
+
+  ${({
+  theme: {
+    palette: { yellow: a, blue: b, green: s, pink: c, grey: i, etc: u, extend: o }
+  },
+  variant: g,
+  color: l
+}) => {
+  var f, h, C, p, k, t, m, n, w, T, S, v, H, A, z;
+  let r = {
+    backgroundColor: a[70],
+    color: $(a[70], [i.white, i[100]])
+  };
+  switch (g) {
+    case "solid":
+      l === "blue" && (r = {
+        backgroundColor: b[80],
+        color: i.white
+      }), l === "green" && (r = {
+        backgroundColor: s[80],
+        color: i.white
+      }), l === "pink" && (r = {
+        backgroundColor: c[80],
+        color: i.white
+      }), l === "orange" && (r = {
+        backgroundColor: u.orange,
+        color: i.white
+      }), l === "play" && (r = {
+        backgroundColor: (f = o == null ? void 0 : o.classType) == null ? void 0 : f.play,
+        color: i[70]
+      }), l === "commute" && (r = {
+        backgroundColor: (h = o == null ? void 0 : o.classType) == null ? void 0 : h.commute,
+        color: i[70]
+      }), l === "learning" && (r = {
+        backgroundColor: (C = o == null ? void 0 : o.classType) == null ? void 0 : C.learning,
+        color: i[70]
+      }), l === "english" && (r = {
+        backgroundColor: (p = o == null ? void 0 : o.classType) == null ? void 0 : p.english,
+        color: i[70]
+      }), l === "creativeArt" && (r = {
+        backgroundColor: (k = o == null ? void 0 : o.classType) == null ? void 0 : k.creativeArt,
+        color: i[70]
+      }), l === "grey" && (r = {
+        backgroundColor: i[90],
+        color: i.white
+      });
+      break;
+    case "ghost":
+      l === "yellow" && (r = {
+        backgroundColor: a[20],
+        color: a[100]
+      }), l === "blue" && (r = {
+        backgroundColor: b[10],
+        color: b[90]
+      }), l === "green" && (r = {
+        backgroundColor: s[10],
+        color: s[80]
+      }), l === "pink" && (r = {
+        backgroundColor: c[10],
+        color: c[70]
+      }), l === "orange" && (r = {
+        backgroundColor: a[20],
+        color: u.orange
+      }), l === "play" && (r = {
+        backgroundColor: (t = o == null ? void 0 : o.classType) == null ? void 0 : t.play,
+        color: i[70]
+      }), l === "commute" && (r = {
+        backgroundColor: (m = o == null ? void 0 : o.classType) == null ? void 0 : m.commute,
+        color: i[70]
+      }), l === "learning" && (r = {
+        backgroundColor: (n = o == null ? void 0 : o.classType) == null ? void 0 : n.learning,
+        color: i[70]
+      }), l === "english" && (r = {
+        backgroundColor: (w = o == null ? void 0 : o.classType) == null ? void 0 : w.english,
+        color: i[70]
+      }), l === "creativeArt" && (r = {
+        backgroundColor: (T = o == null ? void 0 : o.classType) == null ? void 0 : T.creativeArt,
+        color: i[70]
+      }), l === "grey" && (r = {
+        backgroundColor: i[10],
+        color: i[60]
+      });
+      break;
+    case "outlined":
+      l === "yellow" && (r = {
+        backgroundColor: i.white,
+        borderColor: a[60],
+        color: a[100]
+      }), l === "blue" && (r = {
+        backgroundColor: i.white,
+        borderColor: b[40],
+        color: b[100]
+      }), l === "green" && (r = {
+        backgroundColor: i.white,
+        borderColor: s[50],
+        color: s[100]
+      }), l === "pink" && (r = {
+        backgroundColor: i.white,
+        borderColor: c[50],
+        color: c[100]
+      }), l === "orange" && (r = {
+        backgroundColor: i.white,
+        borderColor: u.orange,
+        color: u.orange
+      }), l === "play" && (r = {
+        backgroundColor: i.white,
+        borderColor: (S = o == null ? void 0 : o.classType) == null ? void 0 : S.play,
+        color: i[70]
+      }), l === "commute" && (r = {
+        backgroundColor: i.white,
+        borderColor: (v = o == null ? void 0 : o.classType) == null ? void 0 : v.commute,
+        color: i[70]
+      }), l === "learning" && (r = {
+        backgroundColor: i.white,
+        borderColor: (H = o == null ? void 0 : o.classType) == null ? void 0 : H.learning,
+        color: i[70]
+      }), l === "english" && (r = {
+        backgroundColor: i.white,
+        borderColor: (A = o == null ? void 0 : o.classType) == null ? void 0 : A.english,
+        color: i[70]
+      }), l === "creativeArt" && (r = {
+        backgroundColor: i.white,
+        borderColor: (z = o == null ? void 0 : o.classType) == null ? void 0 : z.creativeArt,
+        color: i[70]
+      }), l === "grey" && (r = {
+        backgroundColor: i.white,
+        borderColor: i[50],
+        color: i[70]
+      });
+      break;
+  }
+  return r;
+}};
+
+  ${({ theme: { typography: a }, size: b }) => {
+  let s = {
+    padding: "7px 9px",
+    maxHeight: 32,
+    borderRadius: 8,
+    fontSize: a.c1M.size,
+    fontWeight: a.c1M.weight,
+    lineHeight: a.c1M.lineHeight,
+    letterSpacing: a.c1M.letterSpacing,
+    "& svg": {
+      width: 20,
+      height: 20
+    }
+  };
+  if (b === "small") {
+    const { c3M: c } = a;
+    s = {
+      padding: "4px 7px",
+      maxHeight: 24,
+      borderRadius: 6,
+      fontSize: c.size,
+      fontWeight: c.weight,
+      lineHeight: c.lineHeight,
+      letterSpacing: c.letterSpacing,
+      "& svg": {
+        width: 16,
+        height: 16
+      }
+    };
+  }
+  if (b === "xSmall") {
+    const { c5B: c } = a;
+    s = {
+      padding: "2px 3px",
+      maxHeight: 16,
+      borderRadius: 4,
+      fontSize: c.size,
+      fontWeight: c.weight,
+      lineHeight: c.lineHeight,
+      letterSpacing: c.letterSpacing,
+      "& svg": {
+        width: 12,
+        height: 12
+      }
+    };
+  }
+  return s;
+}};
+
+  ${({ rounded: a }) => a ? {
+  borderRadius: 99
+} : null};
+`, D = R(function({
+  children: b,
+  tag: s,
+  variant: c = "solid",
+  size: i = "medium",
+  color: u = "yellow",
+  startAdornment: o,
+  endAdornment: g,
+  rounded: l,
+  inlineCSS: r,
+  ...f
+}, h) {
+  return /* @__PURE__ */ M(
+    L,
+    {
+      ref: h,
+      as: s,
+      variant: c,
+      size: i,
+      color: u,
+      rounded: l,
+      ...f,
+      css: r,
+      children: [
+        o,
+        b,
+        g
+      ]
+    }
+  );
+});
+export {
+  D as default
+};

package/dist/Label/Label.stories.d.ts

@@ -0,0 +1,30 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: <T extends import('react').ElementType = "span">(props: import('./Label').LabelProps<T>) => import('react').ReactNode;
+    parameters: {
+        layout: string;
+    };
+    argTypes: {
+        startAdornment: {
+            control: {
+                disable: true;
+            };
+        };
+        endAdornment: {
+            control: {
+                disable: true;
+            };
+        };
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Solid: Story;
+export declare const Ghost: Story;
+export declare const Outlined: Story;
+export declare const StartAdornment: Story;
+export declare const EndAdornment: Story;
+export declare const BothAdornment: Story;

package/dist/Label/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./Label.cjs");exports.default=e.default;

package/dist/Label/index.d.ts

@@ -0,0 +1,3 @@
+import { default as Label } from './Label';
+
+export default Label;

package/dist/Label/index.es.js

@@ -0,0 +1,4 @@
+import e from "./Label.es.js";
+export {
+  e as default
+};

package/dist/LineProgressIndicator/LineProgressIndicator.cjs

@@ -0,0 +1,35 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("@emotion/react/jsx-runtime"),f=require("react"),p=require("@emotion/react"),g=require("@emotion/styled"),m=e=>e&&e.__esModule?e:{default:e},n=m(g),h=p.keyframes`
+    to {
+        transform: translateX(100%);
+    }
+`,y=n.default.div`
+  position: relative;
+  height: ${({size:e})=>e==="large"?42:4}px;
+  border-radius: 100px;
+  background-color: ${({theme:{palette:{grey:e}}})=>e[10]};
+  overflow: hidden;
+`,x=n.default.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  border-radius: 100px;
+  transition: transform ${({transitionDuration:e})=>e}ms linear;
+  background-color: ${({theme:{palette:{brand:e}}})=>e.primary.main};
+
+  ${({loop:e})=>e?{animation:`${h} 1s infinite`}:{}};
+`,b=n.default.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  white-space: nowrap;
+`,j=f.forwardRef(function({children:o,size:i,value:s=0,transitionDuration:l=500,loop:a,inlineCSS:d,...c},u){let t=s-100;return t=s>100?0:t,t=a?-80:t,r.jsxs(y,{ref:u,size:i,...c,css:d,children:[r.jsx(x,{transitionDuration:l,loop:a,style:{transform:`translate3d(${t}%, 0, 0)`}}),i==="large"&&o&&r.jsx(b,{children:o})]})});exports.default=j;