@brycks/core-front 0.3.3 → 0.3.5

package/dist/components/feedback/Alert/Alert.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),S=require("react"),M=require("../../../utils/styles.cjs"),W={info:{icon:r.jsxs("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",children:[r.jsx("circle",{cx:"9",cy:"9",r:"7.5",stroke:"currentColor",strokeWidth:"1.5"}),r.jsx("path",{d:"M9 8V12",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"}),r.jsx("circle",{cx:"9",cy:"5.5",r:"0.75",fill:"currentColor"})]}),colors:{subtle:{backgroundColor:"var(--brycks-info-muted)",color:"var(--brycks-info-default)",borderColor:"transparent"},solid:{backgroundColor:"var(--brycks-info-default)",color:"var(--brycks-info-foreground)",borderColor:"transparent"},outline:{backgroundColor:"transparent",color:"var(--brycks-info-default)",borderColor:"var(--brycks-info-default)"}}},success:{icon:r.jsxs("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",children:[r.jsx("circle",{cx:"9",cy:"9",r:"7.5",stroke:"currentColor",strokeWidth:"1.5"}),r.jsx("path",{d:"M6 9L8 11L12 7",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]}),colors:{subtle:{backgroundColor:"var(--brycks-success-muted)",color:"var(--brycks-success-default)",borderColor:"transparent"},solid:{backgroundColor:"var(--brycks-success-default)",color:"var(--brycks-success-foreground)",borderColor:"transparent"},outline:{backgroundColor:"transparent",color:"var(--brycks-success-default)",borderColor:"var(--brycks-success-default)"}}},warning:{icon:r.jsxs("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",children:[r.jsx("path",{d:"M9 2L16.5 15H1.5L9 2Z",stroke:"currentColor",strokeWidth:"1.5",strokeLinejoin:"round"}),r.jsx("path",{d:"M9 7V10",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"}),r.jsx("circle",{cx:"9",cy:"12.5",r:"0.75",fill:"currentColor"})]}),colors:{subtle:{backgroundColor:"var(--brycks-warning-muted)",color:"var(--brycks-warning-default)",borderColor:"transparent"},solid:{backgroundColor:"var(--brycks-warning-default)",color:"var(--brycks-warning-foreground)",borderColor:"transparent"},outline:{backgroundColor:"transparent",color:"var(--brycks-warning-default)",borderColor:"var(--brycks-warning-default)"}}},error:{icon:r.jsxs("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",children:[r.jsx("circle",{cx:"9",cy:"9",r:"7.5",stroke:"currentColor",strokeWidth:"1.5"}),r.jsx("path",{d:"M6.5 6.5L11.5 11.5M11.5 6.5L6.5 11.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})]}),colors:{subtle:{backgroundColor:"var(--brycks-error-muted)",color:"var(--brycks-error-default)",borderColor:"transparent"},solid:{backgroundColor:"var(--brycks-error-default)",color:"var(--brycks-error-foreground)",borderColor:"transparent"},outline:{backgroundColor:"transparent",color:"var(--brycks-error-default)",borderColor:"var(--brycks-error-default)"}}}},d=S.forwardRef(function({intent:l="info",variant:e="subtle",title:c,icon:u,showIcon:k=!0,action:n,isDismissible:a,onDismiss:b,className:y,style:f,testId:g,children:s,...h},x){const i=W[l],o=i.colors[e],p={display:"flex",alignItems:"flex-start",gap:12,padding:"12px 16px",borderRadius:"var(--brycks-radius-default)",border:`1px solid ${o.borderColor}`,backgroundColor:o.backgroundColor,color:e==="solid"?o.color:"var(--brycks-foreground-default)",...f},v={flexShrink:0,color:o.color,marginTop:1},C={flex:1,minWidth:0},j={fontSize:14,fontWeight:600,marginBottom:s?4:0,color:o.color},m={fontSize:14,lineHeight:1.5,color:e==="solid"?o.color:"var(--brycks-foreground-muted)"},w={display:"flex",alignItems:"center",gap:8,flexShrink:0},L={display:"flex",alignItems:"center",justifyContent:"center",width:24,height:24,borderRadius:"var(--brycks-radius-sm)",color:e==="solid"?o.color:"var(--brycks-foreground-muted)",transition:"all 150ms ease-out",opacity:.7};return r.jsxs("div",{ref:x,role:"alert",className:M.cx("brycks-alert",`brycks-alert--${l}`,`brycks-alert--${e}`,y),style:p,"data-testid":g,...h,children:[k&&r.jsx("span",{className:"brycks-alert-icon",style:v,children:u??i.icon}),r.jsxs("div",{className:"brycks-alert-content",style:C,children:[c&&r.jsx("div",{className:"brycks-alert-title",style:j,children:c}),s&&r.jsx("div",{className:"brycks-alert-description",style:m,children:s})]}),(n||a)&&r.jsxs("div",{className:"brycks-alert-actions",style:w,children:[n,a&&r.jsx("button",{type:"button",className:"brycks-alert-dismiss",style:L,onClick:b,"aria-label":"Dismiss alert",onMouseEnter:t=>{t.currentTarget.style.opacity="1"},onMouseLeave:t=>{t.currentTarget.style.opacity="0.7"},children:r.jsx("svg",{width:"14",height:"14",viewBox:"0 0 14 14",fill:"none",children:r.jsx("path",{d:"M3 3L11 11M11 3L3 11",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})})})]})]})});d.displayName="Alert";exports.Alert=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),y=require("react"),p=require("../../../utils/styles.cjs"),v={info:r.jsxs("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",children:[r.jsx("circle",{cx:"9",cy:"9",r:"7.5",stroke:"currentColor",strokeWidth:"1.5"}),r.jsx("path",{d:"M9 8V12",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"}),r.jsx("circle",{cx:"9",cy:"5.5",r:"0.75",fill:"currentColor"})]}),success:r.jsxs("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",children:[r.jsx("circle",{cx:"9",cy:"9",r:"7.5",stroke:"currentColor",strokeWidth:"1.5"}),r.jsx("path",{d:"M6 9L8 11L12 7",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]}),warning:r.jsxs("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",children:[r.jsx("path",{d:"M9 2L16.5 15H1.5L9 2Z",stroke:"currentColor",strokeWidth:"1.5",strokeLinejoin:"round"}),r.jsx("path",{d:"M9 7V10",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"}),r.jsx("circle",{cx:"9",cy:"12.5",r:"0.75",fill:"currentColor"})]}),error:r.jsxs("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",children:[r.jsx("circle",{cx:"9",cy:"9",r:"7.5",stroke:"currentColor",strokeWidth:"1.5"}),r.jsx("path",{d:"M6.5 6.5L11.5 11.5M11.5 6.5L6.5 11.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})]})},i=y.forwardRef(function({intent:e="info",variant:l="subtle",title:s,icon:n,showIcon:d=!0,action:t,isDismissible:o,onDismiss:a,className:h,style:k,testId:x,children:c,...u},j){return r.jsxs("div",{ref:j,role:"alert",className:p.cx("brycks-alert",`brycks-alert--${e}`,`brycks-alert--${l}`,h),style:k,"data-testid":x,...u,children:[d&&r.jsx("span",{className:"brycks-alert__icon",children:n??v[e]}),r.jsxs("div",{className:"brycks-alert__content",children:[s&&r.jsx("div",{className:"brycks-alert__title",children:s}),c&&r.jsx("div",{className:"brycks-alert__description",children:c})]}),(t||o)&&r.jsxs("div",{className:"brycks-alert__actions",children:[t,o&&r.jsx("button",{type:"button",className:"brycks-alert__dismiss",onClick:a,"aria-label":"Dismiss alert",children:r.jsx("svg",{width:"14",height:"14",viewBox:"0 0 14 14",fill:"none",children:r.jsx("path",{d:"M3 3L11 11M11 3L3 11",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})})})]})]})});i.displayName="Alert";exports.Alert=i;
 //# sourceMappingURL=Alert.cjs.map

package/dist/components/feedback/Alert/Alert.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.cjs","sources":["../../../../src/components/feedback/Alert/Alert.tsx"],"sourcesContent":["/**\r\n * Alert Component\r\n *\r\n * Contextual feedback message for user actions and states.\r\n * Clean design with subtle color coding and optional icons.\r\n */\r\n\r\nimport React, {\r\n  forwardRef,\r\n  type CSSProperties,\r\n  type ReactNode,\r\n  type HTMLAttributes,\r\n} from 'react'\r\nimport { cx } from '../../../utils/styles'\r\n\r\nexport type AlertIntent = 'info' | 'success' | 'warning' | 'error'\r\nexport type AlertVariant = 'subtle' | 'solid' | 'outline'\r\n\r\nexport interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\r\n  /** Visual intent/status */\r\n  intent?: AlertIntent\r\n  /** Visual variant */\r\n  variant?: AlertVariant\r\n  /** Alert title */\r\n  title?: ReactNode\r\n  /** Custom icon */\r\n  icon?: ReactNode\r\n  /** Whether to show default icon */\r\n  showIcon?: boolean\r\n  /** Action element (button, link) */\r\n  action?: ReactNode\r\n  /** Whether alert can be dismissed */\r\n  isDismissible?: boolean\r\n  /** Callback when dismissed */\r\n  onDismiss?: () => void\r\n  /** Custom class name */\r\n  className?: string\r\n  /** Test ID */\r\n  testId?: string\r\n  /** Alert content */\r\n  children?: ReactNode\r\n}\r\n\r\nconst intentConfig: Record<AlertIntent, { icon: React.JSX.Element; colors: Record<AlertVariant, CSSProperties> }> = {\r\n  info: {\r\n    icon: (\r\n      <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n        <circle cx=\"9\" cy=\"9\" r=\"7.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\r\n        <path d=\"M9 8V12\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\r\n        <circle cx=\"9\" cy=\"5.5\" r=\"0.75\" fill=\"currentColor\" />\r\n      </svg>\r\n    ),\r\n    colors: {\r\n      subtle: {\r\n        backgroundColor: 'var(--brycks-info-muted)',\r\n        color: 'var(--brycks-info-default)',\r\n        borderColor: 'transparent',\r\n      },\r\n      solid: {\r\n        backgroundColor: 'var(--brycks-info-default)',\r\n        color: 'var(--brycks-info-foreground)',\r\n        borderColor: 'transparent',\r\n      },\r\n      outline: {\r\n        backgroundColor: 'transparent',\r\n        color: 'var(--brycks-info-default)',\r\n        borderColor: 'var(--brycks-info-default)',\r\n      },\r\n    },\r\n  },\r\n  success: {\r\n    icon: (\r\n      <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n        <circle cx=\"9\" cy=\"9\" r=\"7.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\r\n        <path d=\"M6 9L8 11L12 7\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\r\n      </svg>\r\n    ),\r\n    colors: {\r\n      subtle: {\r\n        backgroundColor: 'var(--brycks-success-muted)',\r\n        color: 'var(--brycks-success-default)',\r\n        borderColor: 'transparent',\r\n      },\r\n      solid: {\r\n        backgroundColor: 'var(--brycks-success-default)',\r\n        color: 'var(--brycks-success-foreground)',\r\n        borderColor: 'transparent',\r\n      },\r\n      outline: {\r\n        backgroundColor: 'transparent',\r\n        color: 'var(--brycks-success-default)',\r\n        borderColor: 'var(--brycks-success-default)',\r\n      },\r\n    },\r\n  },\r\n  warning: {\r\n    icon: (\r\n      <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n        <path d=\"M9 2L16.5 15H1.5L9 2Z\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinejoin=\"round\" />\r\n        <path d=\"M9 7V10\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\r\n        <circle cx=\"9\" cy=\"12.5\" r=\"0.75\" fill=\"currentColor\" />\r\n      </svg>\r\n    ),\r\n    colors: {\r\n      subtle: {\r\n        backgroundColor: 'var(--brycks-warning-muted)',\r\n        color: 'var(--brycks-warning-default)',\r\n        borderColor: 'transparent',\r\n      },\r\n      solid: {\r\n        backgroundColor: 'var(--brycks-warning-default)',\r\n        color: 'var(--brycks-warning-foreground)',\r\n        borderColor: 'transparent',\r\n      },\r\n      outline: {\r\n        backgroundColor: 'transparent',\r\n        color: 'var(--brycks-warning-default)',\r\n        borderColor: 'var(--brycks-warning-default)',\r\n      },\r\n    },\r\n  },\r\n  error: {\r\n    icon: (\r\n      <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n        <circle cx=\"9\" cy=\"9\" r=\"7.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\r\n        <path d=\"M6.5 6.5L11.5 11.5M11.5 6.5L6.5 11.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\r\n      </svg>\r\n    ),\r\n    colors: {\r\n      subtle: {\r\n        backgroundColor: 'var(--brycks-error-muted)',\r\n        color: 'var(--brycks-error-default)',\r\n        borderColor: 'transparent',\r\n      },\r\n      solid: {\r\n        backgroundColor: 'var(--brycks-error-default)',\r\n        color: 'var(--brycks-error-foreground)',\r\n        borderColor: 'transparent',\r\n      },\r\n      outline: {\r\n        backgroundColor: 'transparent',\r\n        color: 'var(--brycks-error-default)',\r\n        borderColor: 'var(--brycks-error-default)',\r\n      },\r\n    },\r\n  },\r\n}\r\n\r\nexport const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(\r\n  {\r\n    intent = 'info',\r\n    variant = 'subtle',\r\n    title,\r\n    icon,\r\n    showIcon = true,\r\n    action,\r\n    isDismissible,\r\n    onDismiss,\r\n    className,\r\n    style,\r\n    testId,\r\n    children,\r\n    ...props\r\n  },\r\n  ref\r\n) {\r\n  const config = intentConfig[intent]\r\n  const variantColors = config.colors[variant]\r\n\r\n  const alertStyle: CSSProperties = {\r\n    display: 'flex',\r\n    alignItems: 'flex-start',\r\n    gap: 12,\r\n    padding: '12px 16px',\r\n    borderRadius: 'var(--brycks-radius-default)',\r\n    border: `1px solid ${variantColors.borderColor}`,\r\n    backgroundColor: variantColors.backgroundColor,\r\n    color: variant === 'solid' ? variantColors.color : 'var(--brycks-foreground-default)',\r\n    ...style,\r\n  }\r\n\r\n  const iconStyle: CSSProperties = {\r\n    flexShrink: 0,\r\n    color: variantColors.color,\r\n    marginTop: 1,\r\n  }\r\n\r\n  const contentStyle: CSSProperties = {\r\n    flex: 1,\r\n    minWidth: 0,\r\n  }\r\n\r\n  const titleStyle: CSSProperties = {\r\n    fontSize: 14,\r\n    fontWeight: 600,\r\n    marginBottom: children ? 4 : 0,\r\n    color: variant === 'solid' ? variantColors.color : variantColors.color,\r\n  }\r\n\r\n  const descriptionStyle: CSSProperties = {\r\n    fontSize: 14,\r\n    lineHeight: 1.5,\r\n    color: variant === 'solid' ? variantColors.color : 'var(--brycks-foreground-muted)',\r\n  }\r\n\r\n  const actionsStyle: CSSProperties = {\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    gap: 8,\r\n    flexShrink: 0,\r\n  }\r\n\r\n  const dismissButtonStyle: CSSProperties = {\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    width: 24,\r\n    height: 24,\r\n    borderRadius: 'var(--brycks-radius-sm)',\r\n    color: variant === 'solid' ? variantColors.color : 'var(--brycks-foreground-muted)',\r\n    transition: 'all 150ms ease-out',\r\n    opacity: 0.7,\r\n  }\r\n\r\n  return (\r\n    <div\r\n      ref={ref}\r\n      role=\"alert\"\r\n      className={cx(\r\n        'brycks-alert',\r\n        `brycks-alert--${intent}`,\r\n        `brycks-alert--${variant}`,\r\n        className\r\n      )}\r\n      style={alertStyle}\r\n      data-testid={testId}\r\n      {...props}\r\n    >\r\n      {showIcon && (\r\n        <span className=\"brycks-alert-icon\" style={iconStyle}>\r\n          {icon ?? config.icon}\r\n        </span>\r\n      )}\r\n\r\n      <div className=\"brycks-alert-content\" style={contentStyle}>\r\n        {title && <div className=\"brycks-alert-title\" style={titleStyle}>{title}</div>}\r\n        {children && <div className=\"brycks-alert-description\" style={descriptionStyle}>{children}</div>}\r\n      </div>\r\n\r\n      {(action || isDismissible) && (\r\n        <div className=\"brycks-alert-actions\" style={actionsStyle}>\r\n          {action}\r\n          {isDismissible && (\r\n            <button\r\n              type=\"button\"\r\n              className=\"brycks-alert-dismiss\"\r\n              style={dismissButtonStyle}\r\n              onClick={onDismiss}\r\n              aria-label=\"Dismiss alert\"\r\n              onMouseEnter={(e) => { e.currentTarget.style.opacity = '1' }}\r\n              onMouseLeave={(e) => { e.currentTarget.style.opacity = '0.7' }}\r\n            >\r\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\r\n                <path d=\"M3 3L11 11M11 3L3 11\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\r\n              </svg>\r\n            </button>\r\n          )}\r\n        </div>\r\n      )}\r\n    </div>\r\n  )\r\n})\r\n\r\nAlert.displayName = 'Alert'\r\n"],"names":["intentConfig","jsxs","jsx","Alert","forwardRef","intent","variant","title","icon","showIcon","action","isDismissible","onDismiss","className","style","testId","children","props","ref","config","variantColors","alertStyle","iconStyle","contentStyle","titleStyle","descriptionStyle","actionsStyle","dismissButtonStyle","cx","e"],"mappings":"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"}
+{"version":3,"file":"Alert.cjs","sources":["../../../../src/components/feedback/Alert/Alert.tsx"],"sourcesContent":["/**\r\n * Alert Component\r\n *\r\n * Contextual feedback message for user actions and states.\r\n * Clean design with subtle color coding and optional icons.\r\n *\r\n * All color styles are handled via CSS classes for easy customization.\r\n */\r\n\r\nimport React, {\r\n  forwardRef,\r\n  type ReactNode,\r\n  type HTMLAttributes,\r\n} from 'react'\r\nimport { cx } from '../../../utils/styles'\r\n\r\nexport type AlertIntent = 'info' | 'success' | 'warning' | 'error'\r\nexport type AlertVariant = 'subtle' | 'solid' | 'outline'\r\n\r\nexport interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\r\n  /** Visual intent/status */\r\n  intent?: AlertIntent\r\n  /** Visual variant */\r\n  variant?: AlertVariant\r\n  /** Alert title */\r\n  title?: ReactNode\r\n  /** Custom icon */\r\n  icon?: ReactNode\r\n  /** Whether to show default icon */\r\n  showIcon?: boolean\r\n  /** Action element (button, link) */\r\n  action?: ReactNode\r\n  /** Whether alert can be dismissed */\r\n  isDismissible?: boolean\r\n  /** Callback when dismissed */\r\n  onDismiss?: () => void\r\n  /** Custom class name */\r\n  className?: string\r\n  /** Test ID */\r\n  testId?: string\r\n  /** Alert content */\r\n  children?: ReactNode\r\n}\r\n\r\nconst defaultIcons: Record<AlertIntent, React.JSX.Element> = {\r\n  info: (\r\n    <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n      <circle cx=\"9\" cy=\"9\" r=\"7.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\r\n      <path d=\"M9 8V12\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\r\n      <circle cx=\"9\" cy=\"5.5\" r=\"0.75\" fill=\"currentColor\" />\r\n    </svg>\r\n  ),\r\n  success: (\r\n    <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n      <circle cx=\"9\" cy=\"9\" r=\"7.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\r\n      <path d=\"M6 9L8 11L12 7\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\r\n    </svg>\r\n  ),\r\n  warning: (\r\n    <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n      <path d=\"M9 2L16.5 15H1.5L9 2Z\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinejoin=\"round\" />\r\n      <path d=\"M9 7V10\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\r\n      <circle cx=\"9\" cy=\"12.5\" r=\"0.75\" fill=\"currentColor\" />\r\n    </svg>\r\n  ),\r\n  error: (\r\n    <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n      <circle cx=\"9\" cy=\"9\" r=\"7.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\r\n      <path d=\"M6.5 6.5L11.5 11.5M11.5 6.5L6.5 11.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\r\n    </svg>\r\n  ),\r\n}\r\n\r\nexport const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(\r\n  {\r\n    intent = 'info',\r\n    variant = 'subtle',\r\n    title,\r\n    icon,\r\n    showIcon = true,\r\n    action,\r\n    isDismissible,\r\n    onDismiss,\r\n    className,\r\n    style,\r\n    testId,\r\n    children,\r\n    ...props\r\n  },\r\n  ref\r\n) {\r\n  return (\r\n    <div\r\n      ref={ref}\r\n      role=\"alert\"\r\n      className={cx(\r\n        'brycks-alert',\r\n        `brycks-alert--${intent}`,\r\n        `brycks-alert--${variant}`,\r\n        className\r\n      )}\r\n      style={style}\r\n      data-testid={testId}\r\n      {...props}\r\n    >\r\n      {showIcon && (\r\n        <span className=\"brycks-alert__icon\">\r\n          {icon ?? defaultIcons[intent]}\r\n        </span>\r\n      )}\r\n\r\n      <div className=\"brycks-alert__content\">\r\n        {title && <div className=\"brycks-alert__title\">{title}</div>}\r\n        {children && <div className=\"brycks-alert__description\">{children}</div>}\r\n      </div>\r\n\r\n      {(action || isDismissible) && (\r\n        <div className=\"brycks-alert__actions\">\r\n          {action}\r\n          {isDismissible && (\r\n            <button\r\n              type=\"button\"\r\n              className=\"brycks-alert__dismiss\"\r\n              onClick={onDismiss}\r\n              aria-label=\"Dismiss alert\"\r\n            >\r\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\r\n                <path d=\"M3 3L11 11M11 3L3 11\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\r\n              </svg>\r\n            </button>\r\n          )}\r\n        </div>\r\n      )}\r\n    </div>\r\n  )\r\n})\r\n\r\nAlert.displayName = 'Alert'\r\n"],"names":["defaultIcons","jsxs","jsx","Alert","forwardRef","intent","variant","title","icon","showIcon","action","isDismissible","onDismiss","className","style","testId","children","props","ref","cx"],"mappings":"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"}

package/dist/components/feedback/Alert/Alert.js

@@ -1,194 +1,69 @@
 import { jsxs as e, jsx as r } from "react/jsx-runtime";
-import { forwardRef as W } from "react";
-import { cx as M } from "../../../utils/styles.js";
-const N = {
-  info: {
-    icon: /* @__PURE__ */ e("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", children: [
-      /* @__PURE__ */ r("circle", { cx: "9", cy: "9", r: "7.5", stroke: "currentColor", strokeWidth: "1.5" }),
-      /* @__PURE__ */ r("path", { d: "M9 8V12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
-      /* @__PURE__ */ r("circle", { cx: "9", cy: "5.5", r: "0.75", fill: "currentColor" })
-    ] }),
-    colors: {
-      subtle: {
-        backgroundColor: "var(--brycks-info-muted)",
-        color: "var(--brycks-info-default)",
-        borderColor: "transparent"
-      },
-      solid: {
-        backgroundColor: "var(--brycks-info-default)",
-        color: "var(--brycks-info-foreground)",
-        borderColor: "transparent"
-      },
-      outline: {
-        backgroundColor: "transparent",
-        color: "var(--brycks-info-default)",
-        borderColor: "var(--brycks-info-default)"
-      }
-    }
-  },
-  success: {
-    icon: /* @__PURE__ */ e("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", children: [
-      /* @__PURE__ */ r("circle", { cx: "9", cy: "9", r: "7.5", stroke: "currentColor", strokeWidth: "1.5" }),
-      /* @__PURE__ */ r("path", { d: "M6 9L8 11L12 7", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
-    ] }),
-    colors: {
-      subtle: {
-        backgroundColor: "var(--brycks-success-muted)",
-        color: "var(--brycks-success-default)",
-        borderColor: "transparent"
-      },
-      solid: {
-        backgroundColor: "var(--brycks-success-default)",
-        color: "var(--brycks-success-foreground)",
-        borderColor: "transparent"
-      },
-      outline: {
-        backgroundColor: "transparent",
-        color: "var(--brycks-success-default)",
-        borderColor: "var(--brycks-success-default)"
-      }
-    }
-  },
-  warning: {
-    icon: /* @__PURE__ */ e("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", children: [
-      /* @__PURE__ */ r("path", { d: "M9 2L16.5 15H1.5L9 2Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }),
-      /* @__PURE__ */ r("path", { d: "M9 7V10", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
-      /* @__PURE__ */ r("circle", { cx: "9", cy: "12.5", r: "0.75", fill: "currentColor" })
-    ] }),
-    colors: {
-      subtle: {
-        backgroundColor: "var(--brycks-warning-muted)",
-        color: "var(--brycks-warning-default)",
-        borderColor: "transparent"
-      },
-      solid: {
-        backgroundColor: "var(--brycks-warning-default)",
-        color: "var(--brycks-warning-foreground)",
-        borderColor: "transparent"
-      },
-      outline: {
-        backgroundColor: "transparent",
-        color: "var(--brycks-warning-default)",
-        borderColor: "var(--brycks-warning-default)"
-      }
-    }
-  },
-  error: {
-    icon: /* @__PURE__ */ e("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", children: [
-      /* @__PURE__ */ r("circle", { cx: "9", cy: "9", r: "7.5", stroke: "currentColor", strokeWidth: "1.5" }),
-      /* @__PURE__ */ r("path", { d: "M6.5 6.5L11.5 11.5M11.5 6.5L6.5 11.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
-    ] }),
-    colors: {
-      subtle: {
-        backgroundColor: "var(--brycks-error-muted)",
-        color: "var(--brycks-error-default)",
-        borderColor: "transparent"
-      },
-      solid: {
-        backgroundColor: "var(--brycks-error-default)",
-        color: "var(--brycks-error-foreground)",
-        borderColor: "transparent"
-      },
-      outline: {
-        backgroundColor: "transparent",
-        color: "var(--brycks-error-default)",
-        borderColor: "var(--brycks-error-default)"
-      }
-    }
-  }
-}, B = W(function({
-  intent: c = "info",
-  variant: t = "subtle",
-  title: n,
-  icon: u,
-  showIcon: k = !0,
-  action: a,
+import { forwardRef as y } from "react";
+import { cx as m } from "../../../utils/styles.js";
+const v = {
+  info: /* @__PURE__ */ e("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", children: [
+    /* @__PURE__ */ r("circle", { cx: "9", cy: "9", r: "7.5", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ r("path", { d: "M9 8V12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
+    /* @__PURE__ */ r("circle", { cx: "9", cy: "5.5", r: "0.75", fill: "currentColor" })
+  ] }),
+  success: /* @__PURE__ */ e("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", children: [
+    /* @__PURE__ */ r("circle", { cx: "9", cy: "9", r: "7.5", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ r("path", { d: "M6 9L8 11L12 7", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+  ] }),
+  warning: /* @__PURE__ */ e("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", children: [
+    /* @__PURE__ */ r("path", { d: "M9 2L16.5 15H1.5L9 2Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }),
+    /* @__PURE__ */ r("path", { d: "M9 7V10", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
+    /* @__PURE__ */ r("circle", { cx: "9", cy: "12.5", r: "0.75", fill: "currentColor" })
+  ] }),
+  error: /* @__PURE__ */ e("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", children: [
+    /* @__PURE__ */ r("circle", { cx: "9", cy: "9", r: "7.5", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ r("path", { d: "M6.5 6.5L11.5 11.5M11.5 6.5L6.5 11.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+  ] })
+}, L = y(function({
+  intent: t = "info",
+  variant: l = "subtle",
+  title: o,
+  icon: n,
+  showIcon: d = !0,
+  action: c,
   isDismissible: i,
-  onDismiss: b,
-  className: y,
-  style: f,
-  testId: g,
-  children: l,
-  ...h
-}, p) {
-  const d = N[c], o = d.colors[t], C = {
-    display: "flex",
-    alignItems: "flex-start",
-    gap: 12,
-    padding: "12px 16px",
-    borderRadius: "var(--brycks-radius-default)",
-    border: `1px solid ${o.borderColor}`,
-    backgroundColor: o.backgroundColor,
-    color: t === "solid" ? o.color : "var(--brycks-foreground-default)",
-    ...f
-  }, v = {
-    flexShrink: 0,
-    color: o.color,
-    marginTop: 1
-  }, m = {
-    flex: 1,
-    minWidth: 0
-  }, x = {
-    fontSize: 14,
-    fontWeight: 600,
-    marginBottom: l ? 4 : 0,
-    color: o.color
-  }, w = {
-    fontSize: 14,
-    lineHeight: 1.5,
-    color: t === "solid" ? o.color : "var(--brycks-foreground-muted)"
-  }, L = {
-    display: "flex",
-    alignItems: "center",
-    gap: 8,
-    flexShrink: 0
-  }, S = {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    width: 24,
-    height: 24,
-    borderRadius: "var(--brycks-radius-sm)",
-    color: t === "solid" ? o.color : "var(--brycks-foreground-muted)",
-    transition: "all 150ms ease-out",
-    opacity: 0.7
-  };
+  onDismiss: a,
+  className: h,
+  style: k,
+  testId: u,
+  children: s,
+  ...p
+}, f) {
   return /* @__PURE__ */ e(
     "div",
     {
-      ref: p,
+      ref: f,
       role: "alert",
-      className: M(
+      className: m(
         "brycks-alert",
-        `brycks-alert--${c}`,
         `brycks-alert--${t}`,
-        y
+        `brycks-alert--${l}`,
+        h
       ),
-      style: C,
-      "data-testid": g,
-      ...h,
+      style: k,
+      "data-testid": u,
+      ...p,
       children: [
-        k && /* @__PURE__ */ r("span", { className: "brycks-alert-icon", style: v, children: u ?? d.icon }),
-        /* @__PURE__ */ e("div", { className: "brycks-alert-content", style: m, children: [
-          n && /* @__PURE__ */ r("div", { className: "brycks-alert-title", style: x, children: n }),
-          l && /* @__PURE__ */ r("div", { className: "brycks-alert-description", style: w, children: l })
+        d && /* @__PURE__ */ r("span", { className: "brycks-alert__icon", children: n ?? v[t] }),
+        /* @__PURE__ */ e("div", { className: "brycks-alert__content", children: [
+          o && /* @__PURE__ */ r("div", { className: "brycks-alert__title", children: o }),
+          s && /* @__PURE__ */ r("div", { className: "brycks-alert__description", children: s })
         ] }),
-        (a || i) && /* @__PURE__ */ e("div", { className: "brycks-alert-actions", style: L, children: [
-          a,
+        (c || i) && /* @__PURE__ */ e("div", { className: "brycks-alert__actions", children: [
+          c,
           i && /* @__PURE__ */ r(
             "button",
             {
               type: "button",
-              className: "brycks-alert-dismiss",
-              style: S,
-              onClick: b,
+              className: "brycks-alert__dismiss",
+              onClick: a,
               "aria-label": "Dismiss alert",
-              onMouseEnter: (s) => {
-                s.currentTarget.style.opacity = "1";
-              },
-              onMouseLeave: (s) => {
-                s.currentTarget.style.opacity = "0.7";
-              },
               children: /* @__PURE__ */ r("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ r("path", { d: "M3 3L11 11M11 3L3 11", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) })
             }
           )
@@ -197,8 +72,8 @@ const N = {
     }
   );
 });
-B.displayName = "Alert";
+L.displayName = "Alert";
 export {
-  B as Alert
+  L as Alert
 };
 //# sourceMappingURL=Alert.js.map

package/dist/components/feedback/Alert/Alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.js","sources":["../../../../src/components/feedback/Alert/Alert.tsx"],"sourcesContent":["/**\r\n * Alert Component\r\n *\r\n * Contextual feedback message for user actions and states.\r\n * Clean design with subtle color coding and optional icons.\r\n */\r\n\r\nimport React, {\r\n  forwardRef,\r\n  type CSSProperties,\r\n  type ReactNode,\r\n  type HTMLAttributes,\r\n} from 'react'\r\nimport { cx } from '../../../utils/styles'\r\n\r\nexport type AlertIntent = 'info' | 'success' | 'warning' | 'error'\r\nexport type AlertVariant = 'subtle' | 'solid' | 'outline'\r\n\r\nexport interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\r\n  /** Visual intent/status */\r\n  intent?: AlertIntent\r\n  /** Visual variant */\r\n  variant?: AlertVariant\r\n  /** Alert title */\r\n  title?: ReactNode\r\n  /** Custom icon */\r\n  icon?: ReactNode\r\n  /** Whether to show default icon */\r\n  showIcon?: boolean\r\n  /** Action element (button, link) */\r\n  action?: ReactNode\r\n  /** Whether alert can be dismissed */\r\n  isDismissible?: boolean\r\n  /** Callback when dismissed */\r\n  onDismiss?: () => void\r\n  /** Custom class name */\r\n  className?: string\r\n  /** Test ID */\r\n  testId?: string\r\n  /** Alert content */\r\n  children?: ReactNode\r\n}\r\n\r\nconst intentConfig: Record<AlertIntent, { icon: React.JSX.Element; colors: Record<AlertVariant, CSSProperties> }> = {\r\n  info: {\r\n    icon: (\r\n      <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n        <circle cx=\"9\" cy=\"9\" r=\"7.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\r\n        <path d=\"M9 8V12\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\r\n        <circle cx=\"9\" cy=\"5.5\" r=\"0.75\" fill=\"currentColor\" />\r\n      </svg>\r\n    ),\r\n    colors: {\r\n      subtle: {\r\n        backgroundColor: 'var(--brycks-info-muted)',\r\n        color: 'var(--brycks-info-default)',\r\n        borderColor: 'transparent',\r\n      },\r\n      solid: {\r\n        backgroundColor: 'var(--brycks-info-default)',\r\n        color: 'var(--brycks-info-foreground)',\r\n        borderColor: 'transparent',\r\n      },\r\n      outline: {\r\n        backgroundColor: 'transparent',\r\n        color: 'var(--brycks-info-default)',\r\n        borderColor: 'var(--brycks-info-default)',\r\n      },\r\n    },\r\n  },\r\n  success: {\r\n    icon: (\r\n      <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n        <circle cx=\"9\" cy=\"9\" r=\"7.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\r\n        <path d=\"M6 9L8 11L12 7\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\r\n      </svg>\r\n    ),\r\n    colors: {\r\n      subtle: {\r\n        backgroundColor: 'var(--brycks-success-muted)',\r\n        color: 'var(--brycks-success-default)',\r\n        borderColor: 'transparent',\r\n      },\r\n      solid: {\r\n        backgroundColor: 'var(--brycks-success-default)',\r\n        color: 'var(--brycks-success-foreground)',\r\n        borderColor: 'transparent',\r\n      },\r\n      outline: {\r\n        backgroundColor: 'transparent',\r\n        color: 'var(--brycks-success-default)',\r\n        borderColor: 'var(--brycks-success-default)',\r\n      },\r\n    },\r\n  },\r\n  warning: {\r\n    icon: (\r\n      <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n        <path d=\"M9 2L16.5 15H1.5L9 2Z\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinejoin=\"round\" />\r\n        <path d=\"M9 7V10\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\r\n        <circle cx=\"9\" cy=\"12.5\" r=\"0.75\" fill=\"currentColor\" />\r\n      </svg>\r\n    ),\r\n    colors: {\r\n      subtle: {\r\n        backgroundColor: 'var(--brycks-warning-muted)',\r\n        color: 'var(--brycks-warning-default)',\r\n        borderColor: 'transparent',\r\n      },\r\n      solid: {\r\n        backgroundColor: 'var(--brycks-warning-default)',\r\n        color: 'var(--brycks-warning-foreground)',\r\n        borderColor: 'transparent',\r\n      },\r\n      outline: {\r\n        backgroundColor: 'transparent',\r\n        color: 'var(--brycks-warning-default)',\r\n        borderColor: 'var(--brycks-warning-default)',\r\n      },\r\n    },\r\n  },\r\n  error: {\r\n    icon: (\r\n      <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n        <circle cx=\"9\" cy=\"9\" r=\"7.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\r\n        <path d=\"M6.5 6.5L11.5 11.5M11.5 6.5L6.5 11.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\r\n      </svg>\r\n    ),\r\n    colors: {\r\n      subtle: {\r\n        backgroundColor: 'var(--brycks-error-muted)',\r\n        color: 'var(--brycks-error-default)',\r\n        borderColor: 'transparent',\r\n      },\r\n      solid: {\r\n        backgroundColor: 'var(--brycks-error-default)',\r\n        color: 'var(--brycks-error-foreground)',\r\n        borderColor: 'transparent',\r\n      },\r\n      outline: {\r\n        backgroundColor: 'transparent',\r\n        color: 'var(--brycks-error-default)',\r\n        borderColor: 'var(--brycks-error-default)',\r\n      },\r\n    },\r\n  },\r\n}\r\n\r\nexport const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(\r\n  {\r\n    intent = 'info',\r\n    variant = 'subtle',\r\n    title,\r\n    icon,\r\n    showIcon = true,\r\n    action,\r\n    isDismissible,\r\n    onDismiss,\r\n    className,\r\n    style,\r\n    testId,\r\n    children,\r\n    ...props\r\n  },\r\n  ref\r\n) {\r\n  const config = intentConfig[intent]\r\n  const variantColors = config.colors[variant]\r\n\r\n  const alertStyle: CSSProperties = {\r\n    display: 'flex',\r\n    alignItems: 'flex-start',\r\n    gap: 12,\r\n    padding: '12px 16px',\r\n    borderRadius: 'var(--brycks-radius-default)',\r\n    border: `1px solid ${variantColors.borderColor}`,\r\n    backgroundColor: variantColors.backgroundColor,\r\n    color: variant === 'solid' ? variantColors.color : 'var(--brycks-foreground-default)',\r\n    ...style,\r\n  }\r\n\r\n  const iconStyle: CSSProperties = {\r\n    flexShrink: 0,\r\n    color: variantColors.color,\r\n    marginTop: 1,\r\n  }\r\n\r\n  const contentStyle: CSSProperties = {\r\n    flex: 1,\r\n    minWidth: 0,\r\n  }\r\n\r\n  const titleStyle: CSSProperties = {\r\n    fontSize: 14,\r\n    fontWeight: 600,\r\n    marginBottom: children ? 4 : 0,\r\n    color: variant === 'solid' ? variantColors.color : variantColors.color,\r\n  }\r\n\r\n  const descriptionStyle: CSSProperties = {\r\n    fontSize: 14,\r\n    lineHeight: 1.5,\r\n    color: variant === 'solid' ? variantColors.color : 'var(--brycks-foreground-muted)',\r\n  }\r\n\r\n  const actionsStyle: CSSProperties = {\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    gap: 8,\r\n    flexShrink: 0,\r\n  }\r\n\r\n  const dismissButtonStyle: CSSProperties = {\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    width: 24,\r\n    height: 24,\r\n    borderRadius: 'var(--brycks-radius-sm)',\r\n    color: variant === 'solid' ? variantColors.color : 'var(--brycks-foreground-muted)',\r\n    transition: 'all 150ms ease-out',\r\n    opacity: 0.7,\r\n  }\r\n\r\n  return (\r\n    <div\r\n      ref={ref}\r\n      role=\"alert\"\r\n      className={cx(\r\n        'brycks-alert',\r\n        `brycks-alert--${intent}`,\r\n        `brycks-alert--${variant}`,\r\n        className\r\n      )}\r\n      style={alertStyle}\r\n      data-testid={testId}\r\n      {...props}\r\n    >\r\n      {showIcon && (\r\n        <span className=\"brycks-alert-icon\" style={iconStyle}>\r\n          {icon ?? config.icon}\r\n        </span>\r\n      )}\r\n\r\n      <div className=\"brycks-alert-content\" style={contentStyle}>\r\n        {title && <div className=\"brycks-alert-title\" style={titleStyle}>{title}</div>}\r\n        {children && <div className=\"brycks-alert-description\" style={descriptionStyle}>{children}</div>}\r\n      </div>\r\n\r\n      {(action || isDismissible) && (\r\n        <div className=\"brycks-alert-actions\" style={actionsStyle}>\r\n          {action}\r\n          {isDismissible && (\r\n            <button\r\n              type=\"button\"\r\n              className=\"brycks-alert-dismiss\"\r\n              style={dismissButtonStyle}\r\n              onClick={onDismiss}\r\n              aria-label=\"Dismiss alert\"\r\n              onMouseEnter={(e) => { e.currentTarget.style.opacity = '1' }}\r\n              onMouseLeave={(e) => { e.currentTarget.style.opacity = '0.7' }}\r\n            >\r\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\r\n                <path d=\"M3 3L11 11M11 3L3 11\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\r\n              </svg>\r\n            </button>\r\n          )}\r\n        </div>\r\n      )}\r\n    </div>\r\n  )\r\n})\r\n\r\nAlert.displayName = 'Alert'\r\n"],"names":["intentConfig","jsxs","jsx","Alert","forwardRef","intent","variant","title","icon","showIcon","action","isDismissible","onDismiss","className","style","testId","children","props","ref","config","variantColors","alertStyle","iconStyle","contentStyle","titleStyle","descriptionStyle","actionsStyle","dismissButtonStyle","cx","e"],"mappings":"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"}
+{"version":3,"file":"Alert.js","sources":["../../../../src/components/feedback/Alert/Alert.tsx"],"sourcesContent":["/**\r\n * Alert Component\r\n *\r\n * Contextual feedback message for user actions and states.\r\n * Clean design with subtle color coding and optional icons.\r\n *\r\n * All color styles are handled via CSS classes for easy customization.\r\n */\r\n\r\nimport React, {\r\n  forwardRef,\r\n  type ReactNode,\r\n  type HTMLAttributes,\r\n} from 'react'\r\nimport { cx } from '../../../utils/styles'\r\n\r\nexport type AlertIntent = 'info' | 'success' | 'warning' | 'error'\r\nexport type AlertVariant = 'subtle' | 'solid' | 'outline'\r\n\r\nexport interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\r\n  /** Visual intent/status */\r\n  intent?: AlertIntent\r\n  /** Visual variant */\r\n  variant?: AlertVariant\r\n  /** Alert title */\r\n  title?: ReactNode\r\n  /** Custom icon */\r\n  icon?: ReactNode\r\n  /** Whether to show default icon */\r\n  showIcon?: boolean\r\n  /** Action element (button, link) */\r\n  action?: ReactNode\r\n  /** Whether alert can be dismissed */\r\n  isDismissible?: boolean\r\n  /** Callback when dismissed */\r\n  onDismiss?: () => void\r\n  /** Custom class name */\r\n  className?: string\r\n  /** Test ID */\r\n  testId?: string\r\n  /** Alert content */\r\n  children?: ReactNode\r\n}\r\n\r\nconst defaultIcons: Record<AlertIntent, React.JSX.Element> = {\r\n  info: (\r\n    <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n      <circle cx=\"9\" cy=\"9\" r=\"7.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\r\n      <path d=\"M9 8V12\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\r\n      <circle cx=\"9\" cy=\"5.5\" r=\"0.75\" fill=\"currentColor\" />\r\n    </svg>\r\n  ),\r\n  success: (\r\n    <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n      <circle cx=\"9\" cy=\"9\" r=\"7.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\r\n      <path d=\"M6 9L8 11L12 7\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\r\n    </svg>\r\n  ),\r\n  warning: (\r\n    <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n      <path d=\"M9 2L16.5 15H1.5L9 2Z\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinejoin=\"round\" />\r\n      <path d=\"M9 7V10\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\r\n      <circle cx=\"9\" cy=\"12.5\" r=\"0.75\" fill=\"currentColor\" />\r\n    </svg>\r\n  ),\r\n  error: (\r\n    <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n      <circle cx=\"9\" cy=\"9\" r=\"7.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\r\n      <path d=\"M6.5 6.5L11.5 11.5M11.5 6.5L6.5 11.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\r\n    </svg>\r\n  ),\r\n}\r\n\r\nexport const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(\r\n  {\r\n    intent = 'info',\r\n    variant = 'subtle',\r\n    title,\r\n    icon,\r\n    showIcon = true,\r\n    action,\r\n    isDismissible,\r\n    onDismiss,\r\n    className,\r\n    style,\r\n    testId,\r\n    children,\r\n    ...props\r\n  },\r\n  ref\r\n) {\r\n  return (\r\n    <div\r\n      ref={ref}\r\n      role=\"alert\"\r\n      className={cx(\r\n        'brycks-alert',\r\n        `brycks-alert--${intent}`,\r\n        `brycks-alert--${variant}`,\r\n        className\r\n      )}\r\n      style={style}\r\n      data-testid={testId}\r\n      {...props}\r\n    >\r\n      {showIcon && (\r\n        <span className=\"brycks-alert__icon\">\r\n          {icon ?? defaultIcons[intent]}\r\n        </span>\r\n      )}\r\n\r\n      <div className=\"brycks-alert__content\">\r\n        {title && <div className=\"brycks-alert__title\">{title}</div>}\r\n        {children && <div className=\"brycks-alert__description\">{children}</div>}\r\n      </div>\r\n\r\n      {(action || isDismissible) && (\r\n        <div className=\"brycks-alert__actions\">\r\n          {action}\r\n          {isDismissible && (\r\n            <button\r\n              type=\"button\"\r\n              className=\"brycks-alert__dismiss\"\r\n              onClick={onDismiss}\r\n              aria-label=\"Dismiss alert\"\r\n            >\r\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\r\n                <path d=\"M3 3L11 11M11 3L3 11\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\r\n              </svg>\r\n            </button>\r\n          )}\r\n        </div>\r\n      )}\r\n    </div>\r\n  )\r\n})\r\n\r\nAlert.displayName = 'Alert'\r\n"],"names":["defaultIcons","jsxs","jsx","Alert","forwardRef","intent","variant","title","icon","showIcon","action","isDismissible","onDismiss","className","style","testId","children","props","ref","cx"],"mappings":";;;AA4CA,MAAMA,IAAuD;AAAA,EAC3D,MACE,gBAAAC,EAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QACnD,UAAA;AAAA,IAAA,gBAAAC,EAAC,UAAA,EAAO,IAAG,KAAI,IAAG,KAAI,GAAE,OAAM,QAAO,gBAAe,aAAY,MAAA,CAAM;AAAA,IACtE,gBAAAA,EAAC,UAAK,GAAE,WAAU,QAAO,gBAAe,aAAY,OAAM,eAAc,QAAA,CAAQ;AAAA,IAChF,gBAAAA,EAAC,YAAO,IAAG,KAAI,IAAG,OAAM,GAAE,QAAO,MAAK,eAAA,CAAe;AAAA,EAAA,GACvD;AAAA,EAEF,SACE,gBAAAD,EAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QACnD,UAAA;AAAA,IAAA,gBAAAC,EAAC,UAAA,EAAO,IAAG,KAAI,IAAG,KAAI,GAAE,OAAM,QAAO,gBAAe,aAAY,MAAA,CAAM;AAAA,IACtE,gBAAAA,EAAC,QAAA,EAAK,GAAE,kBAAiB,QAAO,gBAAe,aAAY,OAAM,eAAc,SAAQ,gBAAe,QAAA,CAAQ;AAAA,EAAA,GAChH;AAAA,EAEF,SACE,gBAAAD,EAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QACnD,UAAA;AAAA,IAAA,gBAAAC,EAAC,QAAA,EAAK,GAAE,yBAAwB,QAAO,gBAAe,aAAY,OAAM,gBAAe,QAAA,CAAQ;AAAA,IAC/F,gBAAAA,EAAC,UAAK,GAAE,WAAU,QAAO,gBAAe,aAAY,OAAM,eAAc,QAAA,CAAQ;AAAA,IAChF,gBAAAA,EAAC,YAAO,IAAG,KAAI,IAAG,QAAO,GAAE,QAAO,MAAK,eAAA,CAAe;AAAA,EAAA,GACxD;AAAA,EAEF,OACE,gBAAAD,EAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QACnD,UAAA;AAAA,IAAA,gBAAAC,EAAC,UAAA,EAAO,IAAG,KAAI,IAAG,KAAI,GAAE,OAAM,QAAO,gBAAe,aAAY,MAAA,CAAM;AAAA,IACtE,gBAAAA,EAAC,UAAK,GAAE,wCAAuC,QAAO,gBAAe,aAAY,OAAM,eAAc,QAAA,CAAQ;AAAA,EAAA,EAAA,CAC/G;AAEJ,GAEaC,IAAQC,EAAuC,SAC1D;AAAA,EACE,QAAAC,IAAS;AAAA,EACT,SAAAC,IAAU;AAAA,EACV,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,QAAAC;AAAA,EACA,eAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,SACE,gBAAAjB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAiB;AAAA,MACA,MAAK;AAAA,MACL,WAAWC;AAAA,QACT;AAAA,QACA,iBAAiBd,CAAM;AAAA,QACvB,iBAAiBC,CAAO;AAAA,QACxBO;AAAA,MAAA;AAAA,MAEF,OAAAC;AAAA,MACA,eAAaC;AAAA,MACZ,GAAGE;AAAA,MAEH,UAAA;AAAA,QAAAR,uBACE,QAAA,EAAK,WAAU,sBACb,UAAAD,KAAQR,EAAaK,CAAM,GAC9B;AAAA,QAGF,gBAAAJ,EAAC,OAAA,EAAI,WAAU,yBACZ,UAAA;AAAA,UAAAM,KAAS,gBAAAL,EAAC,OAAA,EAAI,WAAU,uBAAuB,UAAAK,GAAM;AAAA,UACrDS,KAAY,gBAAAd,EAAC,OAAA,EAAI,WAAU,6BAA6B,UAAAc,EAAA,CAAS;AAAA,QAAA,GACpE;AAAA,SAEEN,KAAUC,MACV,gBAAAV,EAAC,OAAA,EAAI,WAAU,yBACZ,UAAA;AAAA,UAAAS;AAAA,UACAC,KACC,gBAAAT;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,WAAU;AAAA,cACV,SAASU;AAAA,cACT,cAAW;AAAA,cAEX,UAAA,gBAAAV,EAAC,SAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QACnD,4BAAC,QAAA,EAAK,GAAE,wBAAuB,QAAO,gBAAe,aAAY,OAAM,eAAc,SAAQ,EAAA,CAC/F;AAAA,YAAA;AAAA,UAAA;AAAA,QACF,EAAA,CAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;AAEDC,EAAM,cAAc;"}

package/dist/components/form/Checkbox/Checkbox.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("react"),T=require("../../../utils/styles.cjs"),p=require("../../../design-system/primitives/sizing.cjs"),n=require("../../../design-system/primitives/opacity.cjs"),m=require("../../../design-system/primitives/focus.cjs"),v=require("../../../design-system/primitives/transitions.cjs"),h=require("../../../design-system/primitives/typography.cjs");function D({size:o}){return e.jsx("svg",{width:o,height:o,viewBox:"0 0 12 12",fill:"none",children:e.jsx("path",{d:"M2.5 6L5 8.5L9.5 4",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})}function G({size:o}){return e.jsx("svg",{width:o,height:o,viewBox:"0 0 12 12",fill:"none",children:e.jsx("path",{d:"M2.5 6H9.5",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})})}const S=c.forwardRef(function({size:i="md",label:a,description:l,isInvalid:u,isIndeterminate:b,className:j,style:w,testId:C,disabled:s,checked:k,onChange:q,...L},M){const[x,f]=c.useState(!1),[H,g]=c.useState(!1),[R,d]=c.useState(!1),t=p.controlSizes[i],y=h.componentFontSize[i],r=k||b,$={display:"inline-flex",alignItems:"flex-start",gap:p.componentGap.lg,cursor:s?"not-allowed":"pointer",opacity:s?n.stateOpacity.disabled:1},I={position:"relative",width:t.box,height:t.box,borderRadius:"var(--brycks-radius-sm)",border:`1.5px solid ${u?"var(--brycks-error-default)":r?"var(--brycks-primary-default)":x?"var(--brycks-border-focus)":"var(--brycks-border-default)"}`,backgroundColor:r?"var(--brycks-primary-default)":H?"var(--brycks-background-subtle)":"var(--brycks-background-app)",transition:v.transition.quick,transform:R?`scale(${n.scale.controlPressed})`:`scale(${n.scale.normal})`,boxShadow:x?m.focusRing.default:m.focusRing.none,display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0},F={color:"var(--brycks-primary-foreground)",opacity:r?1:0,transform:r?`scale(${n.scale.normal})`:`scale(${n.scale.hidden})`,transition:v.transition.quick},P={position:"absolute",width:"100%",height:"100%",opacity:0,cursor:s?"not-allowed":"pointer",margin:0},z={display:"flex",flexDirection:"column",gap:p.componentGap.xs,paddingTop:(t.box-y)/2},B={fontSize:y,lineHeight:h.componentLineHeight.snug,color:"var(--brycks-foreground-default)",userSelect:"none"},O={fontSize:y-1,lineHeight:h.componentLineHeight.snug,color:"var(--brycks-foreground-muted)",userSelect:"none"};return e.jsxs("label",{className:T.cx("brycks-checkbox",`brycks-checkbox--${i}`,r&&"brycks-checkbox--checked",u&&"brycks-checkbox--invalid",s&&"brycks-checkbox--disabled",j),style:{...$,...w},"data-testid":C,onMouseEnter:()=>g(!0),onMouseLeave:()=>{g(!1),d(!1)},onMouseDown:()=>d(!0),onMouseUp:()=>d(!1),children:[e.jsxs("span",{style:I,children:[e.jsx("input",{ref:M,type:"checkbox",style:P,checked:k,disabled:s,"aria-invalid":u,onChange:q,onFocus:()=>f(!0),onBlur:()=>f(!1),...L}),e.jsx("span",{style:F,children:b?e.jsx(G,{size:t.icon}):e.jsx(D,{size:t.icon})})]}),(a||l)&&e.jsxs("span",{style:z,children:[a&&e.jsx("span",{style:B,children:a}),l&&e.jsx("span",{style:O,children:l})]})]})});S.displayName="Checkbox";exports.Checkbox=S;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("react"),T=require("../../../utils/styles.cjs"),n=require("../../../design-system/primitives/opacity.cjs"),p=require("../../../design-system/primitives/sizing.cjs"),h=require("../../../design-system/primitives/typography.cjs"),m=require("../../../design-system/primitives/focus.cjs"),v=require("../../../design-system/primitives/transitions.cjs");function D({size:o}){return e.jsx("svg",{width:o,height:o,viewBox:"0 0 12 12",fill:"none",children:e.jsx("path",{d:"M2.5 6L5 8.5L9.5 4",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})}function G({size:o}){return e.jsx("svg",{width:o,height:o,viewBox:"0 0 12 12",fill:"none",children:e.jsx("path",{d:"M2.5 6H9.5",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})})}const S=c.forwardRef(function({size:i="md",label:a,description:l,isInvalid:u,isIndeterminate:b,className:j,style:w,testId:C,disabled:s,checked:k,onChange:q,...L},M){const[x,f]=c.useState(!1),[H,g]=c.useState(!1),[R,d]=c.useState(!1),t=p.controlSizes[i],y=h.componentFontSize[i],r=k||b,$={display:"inline-flex",alignItems:"flex-start",gap:p.componentGap.lg,cursor:s?"not-allowed":"pointer",opacity:s?n.stateOpacity.disabled:1},I={position:"relative",width:t.box,height:t.box,borderRadius:"var(--brycks-radius-sm)",border:`1.5px solid ${u?"var(--brycks-error-default)":r?"var(--brycks-primary-default)":x?"var(--brycks-border-focus)":"var(--brycks-border-default)"}`,backgroundColor:r?"var(--brycks-primary-default)":H?"var(--brycks-background-subtle)":"var(--brycks-background-app)",transition:v.transition.quick,transform:R?`scale(${n.scale.controlPressed})`:`scale(${n.scale.normal})`,boxShadow:x?m.focusRing.default:m.focusRing.none,display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0},F={color:"var(--brycks-primary-foreground)",opacity:r?1:0,transform:r?`scale(${n.scale.normal})`:`scale(${n.scale.hidden})`,transition:v.transition.quick},P={position:"absolute",width:"100%",height:"100%",opacity:0,cursor:s?"not-allowed":"pointer",margin:0},z={display:"flex",flexDirection:"column",gap:p.componentGap.xs,paddingTop:(t.box-y)/2},B={fontSize:y,lineHeight:h.componentLineHeight.snug,color:"var(--brycks-foreground-default)",userSelect:"none"},O={fontSize:y-1,lineHeight:h.componentLineHeight.snug,color:"var(--brycks-foreground-muted)",userSelect:"none"};return e.jsxs("label",{className:T.cx("brycks-checkbox",`brycks-checkbox--${i}`,r&&"brycks-checkbox--checked",u&&"brycks-checkbox--invalid",s&&"brycks-checkbox--disabled",j),style:{...$,...w},"data-testid":C,onMouseEnter:()=>g(!0),onMouseLeave:()=>{g(!1),d(!1)},onMouseDown:()=>d(!0),onMouseUp:()=>d(!1),children:[e.jsxs("span",{style:I,children:[e.jsx("input",{ref:M,type:"checkbox",style:P,checked:k,disabled:s,"aria-invalid":u,onChange:q,onFocus:()=>f(!0),onBlur:()=>f(!1),...L}),e.jsx("span",{style:F,children:b?e.jsx(G,{size:t.icon}):e.jsx(D,{size:t.icon})})]}),(a||l)&&e.jsxs("span",{style:z,children:[a&&e.jsx("span",{style:B,children:a}),l&&e.jsx("span",{style:O,children:l})]})]})});S.displayName="Checkbox";exports.Checkbox=S;
 //# sourceMappingURL=Checkbox.cjs.map

package/dist/components/form/Checkbox/Checkbox.js

@@ -1,11 +1,11 @@
 import { jsxs as p, jsx as e } from "react/jsx-runtime";
 import { forwardRef as N, useState as f } from "react";
 import { cx as O } from "../../../utils/styles.js";
-import { componentGap as x, controlSizes as T } from "../../../design-system/primitives/sizing.js";
-import { stateOpacity as W, scale as s } from "../../../design-system/primitives/opacity.js";
-import { focusRing as g } from "../../../design-system/primitives/focus.js";
-import { transition as v } from "../../../design-system/primitives/transitions.js";
-import { componentLineHeight as S, componentFontSize as E } from "../../../design-system/primitives/typography.js";
+import { stateOpacity as T, scale as s } from "../../../design-system/primitives/opacity.js";
+import { componentGap as x, controlSizes as W } from "../../../design-system/primitives/sizing.js";
+import { componentLineHeight as g, componentFontSize as E } from "../../../design-system/primitives/typography.js";
+import { focusRing as v } from "../../../design-system/primitives/focus.js";
+import { transition as S } from "../../../design-system/primitives/transitions.js";
 function G({ size: o }) {
   return /* @__PURE__ */ e("svg", { width: o, height: o, viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ e(
     "path",
@@ -43,12 +43,12 @@ const A = N(function({
   onChange: M,
   ...H
 }, $) {
-  const [k, b] = f(!1), [I, m] = f(!1), [j, d] = f(!1), t = T[c], u = E[c], n = h || y, F = {
+  const [k, b] = f(!1), [I, m] = f(!1), [j, d] = f(!1), t = W[c], u = E[c], n = h || y, F = {
     display: "inline-flex",
     alignItems: "flex-start",
     gap: x.lg,
     cursor: r ? "not-allowed" : "pointer",
-    opacity: r ? W.disabled : 1
+    opacity: r ? T.disabled : 1
   }, B = {
     position: "relative",
     width: t.box,
@@ -56,9 +56,9 @@ const A = N(function({
     borderRadius: "var(--brycks-radius-sm)",
     border: `1.5px solid ${l ? "var(--brycks-error-default)" : n ? "var(--brycks-primary-default)" : k ? "var(--brycks-border-focus)" : "var(--brycks-border-default)"}`,
     backgroundColor: n ? "var(--brycks-primary-default)" : I ? "var(--brycks-background-subtle)" : "var(--brycks-background-app)",
-    transition: v.quick,
+    transition: S.quick,
     transform: j ? `scale(${s.controlPressed})` : `scale(${s.normal})`,
-    boxShadow: k ? g.default : g.none,
+    boxShadow: k ? v.default : v.none,
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
@@ -67,7 +67,7 @@ const A = N(function({
     color: "var(--brycks-primary-foreground)",
     opacity: n ? 1 : 0,
     transform: n ? `scale(${s.normal})` : `scale(${s.hidden})`,
-    transition: v.quick
+    transition: S.quick
   }, R = {
     position: "absolute",
     width: "100%",
@@ -82,12 +82,12 @@ const A = N(function({
     paddingTop: (t.box - u) / 2
   }, z = {
     fontSize: u,
-    lineHeight: S.snug,
+    lineHeight: g.snug,
     color: "var(--brycks-foreground-default)",
     userSelect: "none"
   }, D = {
     fontSize: u - 1,
-    lineHeight: S.snug,
+    lineHeight: g.snug,
     color: "var(--brycks-foreground-muted)",
     userSelect: "none"
   };

package/dist/components/form/Input/Input.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),y=require("react"),F=require("../../../utils/styles.cjs"),d=require("../../../design-system/primitives/typography.cjs"),u=require("../../../design-system/primitives/focus.cjs"),t=require("../../../design-system/primitives/sizing.cjs"),f=require("../../../design-system/primitives/transitions.cjs"),C=require("../../../design-system/primitives/opacity.cjs"),O={sm:{height:t.componentHeights.sm,fontSize:d.componentFontSize.sm,paddingX:t.componentPaddingX.sm,radius:"var(--brycks-radius-md)"},md:{height:t.componentHeights.md,fontSize:d.componentFontSize.md,paddingX:t.componentPaddingX.md,radius:"var(--brycks-radius-default)"},lg:{height:t.componentHeights.lg,fontSize:d.componentFontSize.lg,paddingX:t.componentPaddingX.lg,radius:"var(--brycks-radius-lg)"}},m=y.forwardRef(function({size:p="md",variant:l="outline",isInvalid:n,leftElement:i,rightElement:c,className:k,style:h,testId:S,disabled:o,onFocus:v,onBlur:x,...w},j){const[s,g]=y.useState(!1),r=O[p],R=()=>{const e={display:"flex",alignItems:"center",width:"100%",position:"relative",height:r.height,borderRadius:r.radius,transition:f.transition.default};switch(l){case"outline":Object.assign(e,{backgroundColor:"var(--brycks-background-app)",border:`1px solid ${n?"var(--brycks-error-default)":s?"var(--brycks-border-focus)":"var(--brycks-border-default)"}`,boxShadow:s?n?u.focusRing.error:u.focusRing.default:u.focusRing.none});break;case"filled":Object.assign(e,{backgroundColor:"var(--brycks-background-muted)",border:"1px solid transparent",borderColor:n?"var(--brycks-error-default)":s?"var(--brycks-border-focus)":"transparent"});break;case"flushed":Object.assign(e,{backgroundColor:"transparent",borderRadius:0,borderBottom:`2px solid ${n?"var(--brycks-error-default)":s?"var(--brycks-border-focus)":"var(--brycks-border-default)"}`});break}return o&&Object.assign(e,{opacity:C.stateOpacity.disabled,cursor:"not-allowed"}),e},X={width:"100%",height:r.height,fontFamily:"var(--brycks-font-sans)",fontSize:r.fontSize,color:"var(--brycks-foreground-default)",backgroundColor:"transparent",border:"none",outline:"none",borderRadius:r.radius,paddingLeft:i?t.componentGap.md:r.paddingX,paddingRight:c?t.componentGap.md:r.paddingX,cursor:o?"not-allowed":"text",transition:f.transition.default},z=e=>{g(!0),v?.(e)},q=e=>{g(!1),x?.(e)},b={display:"flex",alignItems:"center",justifyContent:"center",color:"var(--brycks-foreground-muted)",flexShrink:0};return a.jsxs("div",{className:F.cx("brycks-input-wrapper",`brycks-input-wrapper--${l}`,`brycks-input-wrapper--${p}`,n&&"brycks-input-wrapper--invalid",o&&"brycks-input-wrapper--disabled",k),style:{...R(),...h},children:[i&&a.jsx("span",{className:"brycks-input-left-element",style:{...b,paddingLeft:r.paddingX},children:i}),a.jsx("input",{ref:j,className:"brycks-input",style:X,disabled:o,"aria-invalid":n,"data-testid":S,onFocus:z,onBlur:q,...w}),c&&a.jsx("span",{className:"brycks-input-right-element",style:{...b,paddingRight:r.paddingX},children:c})]})});m.displayName="Input";exports.Input=m;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),y=require("react"),F=require("../../../utils/styles.cjs"),t=require("../../../design-system/primitives/sizing.cjs"),d=require("../../../design-system/primitives/typography.cjs"),f=require("../../../design-system/primitives/transitions.cjs"),u=require("../../../design-system/primitives/focus.cjs"),C=require("../../../design-system/primitives/opacity.cjs"),O={sm:{height:t.componentHeights.sm,fontSize:d.componentFontSize.sm,paddingX:t.componentPaddingX.sm,radius:"var(--brycks-radius-md)"},md:{height:t.componentHeights.md,fontSize:d.componentFontSize.md,paddingX:t.componentPaddingX.md,radius:"var(--brycks-radius-default)"},lg:{height:t.componentHeights.lg,fontSize:d.componentFontSize.lg,paddingX:t.componentPaddingX.lg,radius:"var(--brycks-radius-lg)"}},m=y.forwardRef(function({size:p="md",variant:l="outline",isInvalid:n,leftElement:i,rightElement:c,className:k,style:h,testId:S,disabled:o,onFocus:v,onBlur:x,...w},j){const[s,g]=y.useState(!1),r=O[p],R=()=>{const e={display:"flex",alignItems:"center",width:"100%",position:"relative",height:r.height,borderRadius:r.radius,transition:f.transition.default};switch(l){case"outline":Object.assign(e,{backgroundColor:"var(--brycks-background-app)",border:`1px solid ${n?"var(--brycks-error-default)":s?"var(--brycks-border-focus)":"var(--brycks-border-default)"}`,boxShadow:s?n?u.focusRing.error:u.focusRing.default:u.focusRing.none});break;case"filled":Object.assign(e,{backgroundColor:"var(--brycks-background-muted)",border:"1px solid transparent",borderColor:n?"var(--brycks-error-default)":s?"var(--brycks-border-focus)":"transparent"});break;case"flushed":Object.assign(e,{backgroundColor:"transparent",borderRadius:0,borderBottom:`2px solid ${n?"var(--brycks-error-default)":s?"var(--brycks-border-focus)":"var(--brycks-border-default)"}`});break}return o&&Object.assign(e,{opacity:C.stateOpacity.disabled,cursor:"not-allowed"}),e},X={width:"100%",height:r.height,fontFamily:"var(--brycks-font-sans)",fontSize:r.fontSize,color:"var(--brycks-foreground-default)",backgroundColor:"transparent",border:"none",outline:"none",borderRadius:r.radius,paddingLeft:i?t.componentGap.md:r.paddingX,paddingRight:c?t.componentGap.md:r.paddingX,cursor:o?"not-allowed":"text",transition:f.transition.default},z=e=>{g(!0),v?.(e)},q=e=>{g(!1),x?.(e)},b={display:"flex",alignItems:"center",justifyContent:"center",color:"var(--brycks-foreground-muted)",flexShrink:0};return a.jsxs("div",{className:F.cx("brycks-input-wrapper",`brycks-input-wrapper--${l}`,`brycks-input-wrapper--${p}`,n&&"brycks-input-wrapper--invalid",o&&"brycks-input-wrapper--disabled",k),style:{...R(),...h},children:[i&&a.jsx("span",{className:"brycks-input-left-element",style:{...b,paddingLeft:r.paddingX},children:i}),a.jsx("input",{ref:j,className:"brycks-input",style:X,disabled:o,"aria-invalid":n,"data-testid":S,onFocus:z,onBlur:q,...w}),c&&a.jsx("span",{className:"brycks-input-right-element",style:{...b,paddingRight:r.paddingX},children:c})]})});m.displayName="Input";exports.Input=m;
 //# sourceMappingURL=Input.cjs.map

package/dist/components/form/Input/Input.js

@@ -1,28 +1,28 @@
 import { jsxs as F, jsx as d } from "react/jsx-runtime";
 import { forwardRef as N, useState as O } from "react";
 import { cx as $ } from "../../../utils/styles.js";
-import { componentFontSize as i } from "../../../design-system/primitives/typography.js";
-import { focusRing as c } from "../../../design-system/primitives/focus.js";
-import { componentPaddingX as p, componentHeights as u, componentGap as m } from "../../../design-system/primitives/sizing.js";
+import { componentPaddingX as i, componentHeights as c, componentGap as m } from "../../../design-system/primitives/sizing.js";
+import { componentFontSize as p } from "../../../design-system/primitives/typography.js";
 import { transition as y } from "../../../design-system/primitives/transitions.js";
+import { focusRing as u } from "../../../design-system/primitives/focus.js";
 import { stateOpacity as B } from "../../../design-system/primitives/opacity.js";
 const L = {
   sm: {
-    height: u.sm,
-    fontSize: i.sm,
-    paddingX: p.sm,
+    height: c.sm,
+    fontSize: p.sm,
+    paddingX: i.sm,
     radius: "var(--brycks-radius-md)"
   },
   md: {
-    height: u.md,
-    fontSize: i.md,
-    paddingX: p.md,
+    height: c.md,
+    fontSize: p.md,
+    paddingX: i.md,
     radius: "var(--brycks-radius-default)"
   },
   lg: {
-    height: u.lg,
-    fontSize: i.lg,
-    paddingX: p.lg,
+    height: c.lg,
+    fontSize: p.lg,
+    paddingX: i.lg,
     radius: "var(--brycks-radius-lg)"
   }
 }, G = N(function({
@@ -54,7 +54,7 @@ const L = {
         Object.assign(e, {
           backgroundColor: "var(--brycks-background-app)",
           border: `1px solid ${t ? "var(--brycks-error-default)" : a ? "var(--brycks-border-focus)" : "var(--brycks-border-default)"}`,
-          boxShadow: a ? t ? c.error : c.default : c.none
+          boxShadow: a ? t ? u.error : u.default : u.none
         });
         break;
       case "filled":

package/dist/components/form/Slider/Slider.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),i=require("react"),J=require("../../../utils/styles.cjs"),m=require("../../../design-system/tokens/typography.cjs"),l=require("../../../design-system/tokens/spacing.cjs"),z=require("../../../design-system/primitives/sizing.cjs"),c=require("../../../design-system/tokens/motion.cjs"),Q={sm:{track:l.spacing[1],thumb:l.spacing[3.5],fontSize:m.fontSizes.sm},md:{track:z.componentGap.sm,thumb:l.spacing[4]+l.spacing[.5],fontSize:m.fontSizes.base},lg:{track:l.spacing[2],thumb:l.spacing[5]+l.spacing[.5],fontSize:m.fontSizes.md}},R=i.forwardRef(function({size:k="md",min:a=0,max:u=100,step:f=1,value:b,defaultValue:C=a,onChange:S,showValue:w=!1,formatValue:x=v=>String(v),label:p,disabled:d=!1,className:q,style:E,testId:M,...I},g){const[v,O]=i.useState(C),[y,h]=i.useState(!1),[A,D]=i.useState(!1),$=i.useRef(null),s=b??v,t=Q[k],j=(s-a)/(u-a)*100,r=i.useCallback(e=>{const n=Math.max(a,Math.min(u,e));b===void 0&&O(n),S?.(n)},[b,a,u,S]);i.useEffect(()=>{const e=$.current;if(!e)return;const n=V=>{const B=V.target;r(parseFloat(B.value))};return e.addEventListener("input",n),()=>e.removeEventListener("input",n)},[r]);const L=i.useCallback(e=>{const n=e.shiftKey?f*10:f;switch(e.key){case"ArrowRight":case"ArrowUp":e.preventDefault(),r(s+n);break;case"ArrowLeft":case"ArrowDown":e.preventDefault(),r(s-n);break;case"Home":e.preventDefault(),r(a);break;case"End":e.preventDefault(),r(u);break;case"PageUp":e.preventDefault(),r(s+n*10);break;case"PageDown":e.preventDefault(),r(s-n*10);break}},[s,f,a,u,r]),H={display:"flex",flexDirection:"column",gap:l.spacing[2],opacity:d?.5:1,...E},K={display:"flex",alignItems:"center",justifyContent:"space-between",gap:z.componentGap.xl},N={fontSize:t.fontSize,fontWeight:500,color:"var(--brycks-foreground-default)"},P={fontSize:t.fontSize,fontWeight:500,color:"var(--brycks-foreground-muted)",fontVariantNumeric:"tabular-nums"},T={position:"relative",display:"flex",alignItems:"center",height:t.thumb,cursor:d?"not-allowed":"pointer"},U={position:"absolute",width:"100%",height:t.track,borderRadius:t.track/2,backgroundColor:"var(--brycks-background-muted)"},G={position:"absolute",left:0,height:t.track,width:`${j}%`,borderRadius:t.track/2,backgroundColor:d?"var(--brycks-foreground-muted)":"var(--brycks-primary-default)",transition:y?"none":`width ${c.durations.fast}ms ${c.easings.easeOut}`},W={position:"absolute",left:`calc(${j}% - ${t.thumb/2}px)`,width:t.thumb,height:t.thumb,borderRadius:"50%",backgroundColor:"white",border:`2px solid ${d?"var(--brycks-foreground-muted)":"var(--brycks-primary-default)"}`,boxShadow:y||A?"var(--brycks-shadow-md)":"var(--brycks-shadow-sm)",transform:y?"scale(1.1)":"scale(1)",transition:y?`transform ${c.durations.fast}ms ${c.easings.easeOut}, box-shadow ${c.durations.fast}ms ${c.easings.easeOut}`:`all ${c.durations.fast}ms ${c.easings.easeOut}`,pointerEvents:"none"},F={position:"absolute",width:"100%",height:t.thumb,margin:0,padding:0,opacity:0,cursor:d?"not-allowed":"pointer"};return o.jsxs("div",{className:J.cx("brycks-slider",`brycks-slider--${k}`,q),style:H,children:[(p||w)&&o.jsxs("div",{style:K,children:[p&&o.jsx("span",{style:N,children:p}),w&&o.jsx("span",{style:P,children:x(s)})]}),o.jsxs("div",{style:T,onMouseEnter:()=>D(!0),onMouseLeave:()=>D(!1),children:[o.jsx("div",{style:U}),o.jsx("div",{style:G}),o.jsx("div",{style:W}),o.jsx("input",{ref:e=>{$.current=e,typeof g=="function"?g(e):g&&(g.current=e)},type:"range",role:"slider","aria-valuemin":a,"aria-valuemax":u,"aria-valuenow":s,"aria-valuetext":x(s),"aria-label":p,min:a,max:u,step:f,value:s,disabled:d,style:F,onKeyDown:L,onMouseDown:()=>h(!0),onMouseUp:()=>h(!1),onTouchStart:()=>h(!0),onTouchEnd:()=>h(!1),"data-testid":M,...I})]})]})});R.displayName="Slider";exports.Slider=R;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),i=require("react"),J=require("../../../utils/styles.cjs"),m=require("../../../design-system/tokens/typography.cjs"),c=require("../../../design-system/tokens/motion.cjs"),l=require("../../../design-system/tokens/spacing.cjs"),z=require("../../../design-system/primitives/sizing.cjs"),Q={sm:{track:l.spacing[1],thumb:l.spacing[3.5],fontSize:m.fontSizes.sm},md:{track:z.componentGap.sm,thumb:l.spacing[4]+l.spacing[.5],fontSize:m.fontSizes.base},lg:{track:l.spacing[2],thumb:l.spacing[5]+l.spacing[.5],fontSize:m.fontSizes.md}},R=i.forwardRef(function({size:k="md",min:a=0,max:u=100,step:f=1,value:b,defaultValue:C=a,onChange:S,showValue:w=!1,formatValue:x=v=>String(v),label:p,disabled:d=!1,className:q,style:E,testId:M,...I},g){const[v,O]=i.useState(C),[y,h]=i.useState(!1),[A,D]=i.useState(!1),$=i.useRef(null),s=b??v,t=Q[k],j=(s-a)/(u-a)*100,r=i.useCallback(e=>{const n=Math.max(a,Math.min(u,e));b===void 0&&O(n),S?.(n)},[b,a,u,S]);i.useEffect(()=>{const e=$.current;if(!e)return;const n=V=>{const B=V.target;r(parseFloat(B.value))};return e.addEventListener("input",n),()=>e.removeEventListener("input",n)},[r]);const L=i.useCallback(e=>{const n=e.shiftKey?f*10:f;switch(e.key){case"ArrowRight":case"ArrowUp":e.preventDefault(),r(s+n);break;case"ArrowLeft":case"ArrowDown":e.preventDefault(),r(s-n);break;case"Home":e.preventDefault(),r(a);break;case"End":e.preventDefault(),r(u);break;case"PageUp":e.preventDefault(),r(s+n*10);break;case"PageDown":e.preventDefault(),r(s-n*10);break}},[s,f,a,u,r]),H={display:"flex",flexDirection:"column",gap:l.spacing[2],opacity:d?.5:1,...E},K={display:"flex",alignItems:"center",justifyContent:"space-between",gap:z.componentGap.xl},N={fontSize:t.fontSize,fontWeight:500,color:"var(--brycks-foreground-default)"},P={fontSize:t.fontSize,fontWeight:500,color:"var(--brycks-foreground-muted)",fontVariantNumeric:"tabular-nums"},T={position:"relative",display:"flex",alignItems:"center",height:t.thumb,cursor:d?"not-allowed":"pointer"},U={position:"absolute",width:"100%",height:t.track,borderRadius:t.track/2,backgroundColor:"var(--brycks-background-muted)"},G={position:"absolute",left:0,height:t.track,width:`${j}%`,borderRadius:t.track/2,backgroundColor:d?"var(--brycks-foreground-muted)":"var(--brycks-primary-default)",transition:y?"none":`width ${c.durations.fast}ms ${c.easings.easeOut}`},W={position:"absolute",left:`calc(${j}% - ${t.thumb/2}px)`,width:t.thumb,height:t.thumb,borderRadius:"50%",backgroundColor:"white",border:`2px solid ${d?"var(--brycks-foreground-muted)":"var(--brycks-primary-default)"}`,boxShadow:y||A?"var(--brycks-shadow-md)":"var(--brycks-shadow-sm)",transform:y?"scale(1.1)":"scale(1)",transition:y?`transform ${c.durations.fast}ms ${c.easings.easeOut}, box-shadow ${c.durations.fast}ms ${c.easings.easeOut}`:`all ${c.durations.fast}ms ${c.easings.easeOut}`,pointerEvents:"none"},F={position:"absolute",width:"100%",height:t.thumb,margin:0,padding:0,opacity:0,cursor:d?"not-allowed":"pointer"};return o.jsxs("div",{className:J.cx("brycks-slider",`brycks-slider--${k}`,q),style:H,children:[(p||w)&&o.jsxs("div",{style:K,children:[p&&o.jsx("span",{style:N,children:p}),w&&o.jsx("span",{style:P,children:x(s)})]}),o.jsxs("div",{style:T,onMouseEnter:()=>D(!0),onMouseLeave:()=>D(!1),children:[o.jsx("div",{style:U}),o.jsx("div",{style:G}),o.jsx("div",{style:W}),o.jsx("input",{ref:e=>{$.current=e,typeof g=="function"?g(e):g&&(g.current=e)},type:"range",role:"slider","aria-valuemin":a,"aria-valuemax":u,"aria-valuenow":s,"aria-valuetext":x(s),"aria-label":p,min:a,max:u,step:f,value:s,disabled:d,style:F,onKeyDown:L,onMouseDown:()=>h(!0),onMouseUp:()=>h(!1),onTouchStart:()=>h(!0),onTouchEnd:()=>h(!1),"data-testid":M,...I})]})]})});R.displayName="Slider";exports.Slider=R;
 //# sourceMappingURL=Slider.cjs.map

package/dist/components/form/Slider/Slider.js

@@ -2,9 +2,9 @@ import { jsxs as v, jsx as c } from "react/jsx-runtime";
 import { forwardRef as X, useState as k, useRef as Y, useCallback as E, useEffect as Z } from "react";
 import { cx as _ } from "../../../utils/styles.js";
 import { fontSizes as w } from "../../../design-system/tokens/typography.js";
+import { durations as m, easings as y } from "../../../design-system/tokens/motion.js";
 import { spacing as s } from "../../../design-system/tokens/spacing.js";
 import { componentGap as I } from "../../../design-system/primitives/sizing.js";
-import { durations as m, easings as y } from "../../../design-system/tokens/motion.js";
 const ee = {
   sm: { track: s[1], thumb: s[3.5], fontSize: w.sm },
   md: { track: I.sm, thumb: s[4] + s[0.5], fontSize: w.base },