@simpli-route/apollo-ds 0.0.18 → 0.0.19

package/dist/components/Switch/ContentSwitch.d.ts

@@ -1,3 +1,3 @@
 import { ContentSwitchProps } from './types';
 
-export declare const ContentSwitch: ({ label, description, errorMessage, isDisabled, isInvalid, children, }: ContentSwitchProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const ContentSwitch: ({ label, description, errorMessage, isDisabled, isInvalid, children, renderLabelIcon, }: ContentSwitchProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Switch/Switch.d.ts

@@ -4,4 +4,4 @@ import { SwitchProps } from './types';
  * Switch component **version 0.1**  https://www.figma.com/design/h6tZeqNdVEUvrgwOwK4vcY/Design-System---The-Bible?node-id=6065-102190&node-type=frame&t=CNNGulv9I7LJJ6it-0
  *
  */
-export declare const Switch: ({ children, label, description, errorMessage, validationState, size, isDisabled, isSelected, onChange, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, }: SwitchProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Switch: ({ children, label, description, errorMessage, validationState, size, isDisabled, isSelected, onChange, renderLabelIcon, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, }: SwitchProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Switch/types.d.ts

@@ -33,6 +33,11 @@ export interface SwitchProps extends Omit<SwitchAriaProps, "children"> {
      */
     isSelected?: boolean;
     onChange?: (selected: boolean) => void;
+    /**
+     * Render icon in label position
+     * @default null
+     */
+    renderLabelIcon?: React.ReactNode;
 }
 export interface SwitchIndicatorProps {
     isSelected: boolean;
@@ -51,4 +56,5 @@ export interface ContentSwitchProps {
     isDisabled: boolean;
     isInvalid: boolean;
     children?: React.ReactNode;
+    renderLabelIcon?: React.ReactNode;
 }

package/dist/index.cjs17.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./index.cjs10.js"),r=require("./index.cjs11.js"),l=({label:e,description:n,errorMessage:x,isDisabled:s,isInvalid:c,children:u})=>!e&&!n&&!u?null:t.jsxRuntimeExports.jsxs("div",{className:"flex flex-col",children:[e?t.jsxRuntimeExports.jsx("p",{className:r.cn("text-sm font-semibold",s?"text-neutral-600":"text-neutral-900"),children:e}):u,n&&!x&&t.jsxRuntimeExports.jsx("p",{className:r.cn("text-xs",s?"text-neutral-600":"text-neutral-800"),children:n}),c&&x&&t.jsxRuntimeExports.jsx("p",{className:"text-sm text-red-500",children:x})]});exports.ContentSwitch=l;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("class-variance-authority"),t=[{intent:"primary",isHovered:!0,isDisabled:!1,isActive:!1,class:"bg-primary-100"},{intent:"primary",isHovered:!0,isDisabled:!1,isActive:!0,class:"bg-primary-700 text-primary-50"},{intent:"secondary",isHovered:!0,isDisabled:!1,isActive:!1,class:"bg-primary-300"},{intent:"secondary",isHovered:!0,isDisabled:!1,isActive:!0,class:"bg-primary-700 text-primary-50"},{intent:"minimal",isHovered:!0,isDisabled:!1,isActive:!1,class:"bg-neutral-200 text-neutral-800"},{intent:"minimal",isHovered:!0,isDisabled:!1,isActive:!0,class:"bg-neutral-200 text-primary-700"}],i=[{intent:"primary",isActive:!0,isDisabled:!1,class:"bg-primary-500 text-primary-50"},{intent:"primary",isActive:!0,isDisabled:!0,class:"bg-primary-300 text-primary-100"},{intent:"secondary",isActive:!0,isDisabled:!1,class:"bg-primary-700 text-primary-50"},{intent:"secondary",isActive:!0,isDisabled:!0,class:"bg-primary-100 text-primary-300"},{intent:"minimal",isActive:!0,isDisabled:!1,class:"text-primary-500"},{intent:"minimal",isActive:!0,isDisabled:!0,class:"text-neutral-700"}],s=[{intent:"primary",isDisabled:!0,isActive:!1,class:"text-neutral-600"},{intent:"primary",isDisabled:!0,isActive:!0,class:"bg-primary-300 text-primary-100"},{intent:"secondary",isDisabled:!0,isActive:!1,class:"bg-neutral-400 text-neutral-600"},{intent:"secondary",isDisabled:!0,isActive:!0,class:"bg-primary-100 text-primary-300"},{intent:"minimal",isDisabled:!0,isActive:!1,class:"text-neutral-600"},{intent:"minimal",isDisabled:!0,isActive:!0,class:"text-neutral-700"}],r=e.cva("inline-flex items-center justify-center border border-transparent transition duration-150 ease-in-out",{variants:{intent:{primary:"bg-transparent text-primary-500",secondary:"bg-primary-200 text-primary-500",minimal:"bg-transparent text-neutral-700"},size:{xxs:"p-1",xs:"p-2",sm:"p-2.5",md:"p-3",lg:"p-4"},isDisabled:{true:"pointer-events-none cursor-not-allowed"},isHovered:{true:""},isActive:{true:""},isFocused:{false:"",true:"focus:outline-none focus:ring-offset-2 outline-none ring-2 ring-sky-400"}},compoundVariants:[...t,...i,...s]});exports.buttonVariants=r;

package/dist/index.cjs18.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./index.cjs10.js"),s=require("./index.cjs11.js"),a=require("./index.cjs15.js"),c=({isSelected:t,isDisabled:e,isHovered:n,size:i,dimensions:r})=>o.jsxRuntimeExports.jsx("div",{className:s.cn(a.indicatorVariants({isSelected:t,isDisabled:e,size:i,isHoveredWhenOff:n&&!t})),style:{left:t?`${r.onLeft}px`:`${r.offLeft}px`}});exports.SwitchIndicator=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("./index.cjs10.js"),l=require("./index.cjs11.js"),c=o=>{const{isIndeterminate:t,isSelected:e,className:n,isHovered:i}=o,r=i&&!e&&!t?"text-neutral-500":"",a=!!(r||e);return s.jsxRuntimeExports.jsx("svg",{className:l.cn("stroke-current",r,n),viewBox:"-1 1 17 17",children:t?s.jsxRuntimeExports.jsx("line",{x1:1,y1:10,x2:14,y2:10,fill:"none",strokeWidth:2,strokeDasharray:14,strokeDashoffset:e?28:42,style:{transition:"all 400ms"}}):s.jsxRuntimeExports.jsx("polyline",{points:"1 9 7 14 15 4",fill:"none",strokeWidth:2,strokeDasharray:22,strokeDashoffset:a?44:66,style:{transition:"all 400ms"}})})};exports.MarkIcon=c;

package/dist/index.cjs19.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("./index.cjs10.js"),l=require("./index.cjs11.js"),c=o=>{const{isIndeterminate:t,isSelected:e,className:n,isHovered:i}=o,r=i&&!e&&!t?"text-neutral-500":"",a=!!(r||e);return s.jsxRuntimeExports.jsx("svg",{className:l.cn("stroke-current",r,n),viewBox:"-1 1 17 17",children:t?s.jsxRuntimeExports.jsx("line",{x1:1,y1:10,x2:14,y2:10,fill:"none",strokeWidth:2,strokeDasharray:14,strokeDashoffset:e?28:42,style:{transition:"all 400ms"}}):s.jsxRuntimeExports.jsx("polyline",{points:"1 9 7 14 15 4",fill:"none",strokeWidth:2,strokeDasharray:22,strokeDashoffset:a?44:66,style:{transition:"all 400ms"}})})};exports.MarkIcon=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./index.cjs10.js"),i=require("./index.cjs11.js"),m=({label:e,description:s,errorMessage:x,isDisabled:n,isInvalid:l,children:r,renderLabelIcon:u})=>!e&&!s&&!r?null:t.jsxRuntimeExports.jsxs("div",{className:"flex flex-col",children:[e?t.jsxRuntimeExports.jsxs("div",{className:"flex items-center gap-x-1",children:[t.jsxRuntimeExports.jsx("p",{className:i.cn("text-sm font-semibold",n?"text-neutral-600":"text-neutral-900"),children:e}),u?t.jsxRuntimeExports.jsx(t.jsxRuntimeExports.Fragment,{children:u}):null]}):r,s&&!x&&t.jsxRuntimeExports.jsx("p",{className:i.cn("text-xs",n?"text-neutral-600":"text-neutral-800"),children:s}),l&&x&&t.jsxRuntimeExports.jsx("p",{className:"text-sm text-red-500",children:x})]});exports.ContentSwitch=m;

package/dist/index.cjs20.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("class-variance-authority"),t=[{intent:"primary",isHovered:!0,isDisabled:!1,isActive:!1,class:"bg-primary-100"},{intent:"primary",isHovered:!0,isDisabled:!1,isActive:!0,class:"bg-primary-700 text-primary-50"},{intent:"secondary",isHovered:!0,isDisabled:!1,isActive:!1,class:"bg-primary-300"},{intent:"secondary",isHovered:!0,isDisabled:!1,isActive:!0,class:"bg-primary-700 text-primary-50"},{intent:"minimal",isHovered:!0,isDisabled:!1,isActive:!1,class:"bg-neutral-200 text-neutral-800"},{intent:"minimal",isHovered:!0,isDisabled:!1,isActive:!0,class:"bg-neutral-200 text-primary-700"}],i=[{intent:"primary",isActive:!0,isDisabled:!1,class:"bg-primary-500 text-primary-50"},{intent:"primary",isActive:!0,isDisabled:!0,class:"bg-primary-300 text-primary-100"},{intent:"secondary",isActive:!0,isDisabled:!1,class:"bg-primary-700 text-primary-50"},{intent:"secondary",isActive:!0,isDisabled:!0,class:"bg-primary-100 text-primary-300"},{intent:"minimal",isActive:!0,isDisabled:!1,class:"text-primary-500"},{intent:"minimal",isActive:!0,isDisabled:!0,class:"text-neutral-700"}],s=[{intent:"primary",isDisabled:!0,isActive:!1,class:"text-neutral-600"},{intent:"primary",isDisabled:!0,isActive:!0,class:"bg-primary-300 text-primary-100"},{intent:"secondary",isDisabled:!0,isActive:!1,class:"bg-neutral-400 text-neutral-600"},{intent:"secondary",isDisabled:!0,isActive:!0,class:"bg-primary-100 text-primary-300"},{intent:"minimal",isDisabled:!0,isActive:!1,class:"text-neutral-600"},{intent:"minimal",isDisabled:!0,isActive:!0,class:"text-neutral-700"}],r=e.cva("inline-flex items-center justify-center border border-transparent transition duration-150 ease-in-out",{variants:{intent:{primary:"bg-transparent text-primary-500",secondary:"bg-primary-200 text-primary-500",minimal:"bg-transparent text-neutral-700"},size:{xxs:"p-1",xs:"p-2",sm:"p-2.5",md:"p-3",lg:"p-4"},isDisabled:{true:"pointer-events-none cursor-not-allowed"},isHovered:{true:""},isActive:{true:""},isFocused:{false:"",true:"focus:outline-none focus:ring-offset-2 outline-none ring-2 ring-sky-400"}},compoundVariants:[...t,...i,...s]});exports.buttonVariants=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./index.cjs10.js"),s=require("./index.cjs11.js"),a=require("./index.cjs15.js"),c=({isSelected:t,isDisabled:e,isHovered:n,size:i,dimensions:r})=>o.jsxRuntimeExports.jsx("div",{className:s.cn(a.indicatorVariants({isSelected:t,isDisabled:e,size:i,isHoveredWhenOff:n&&!t})),style:{left:t?`${r.onLeft}px`:`${r.offLeft}px`}});exports.SwitchIndicator=c;

package/dist/index.cjs4.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index.cjs10.js"),l=require("react-aria-components"),x=require("./index.cjs11.js"),p=require("./index.cjs19.js"),b=require("./index.cjs14.js"),h=({isIndeterminate:c=!1,isDisabled:s=!1,className:u,children:r,onChange:i,isSelected:n,id:o,...m})=>{const j=(a,t)=>x.cn(b.checkboxVariants({isDisabled:s,isFocusVisible:a,isHovered:t,isSelected:n,label:!!r}));return e.jsxRuntimeExports.jsx(l.Checkbox,{className:x.cn("group flex items-center",u),isSelected:n,isDisabled:s,id:o,onChange:i,...m,children:({isFocusVisible:a,isHovered:t})=>e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx("div",{className:j(a,t),"aria-hidden":"true",children:e.jsxRuntimeExports.jsx(p.MarkIcon,{isIndeterminate:c,isHovered:t,isSelected:n,className:"size-3"})}),r&&e.jsxRuntimeExports.jsx("span",{className:x.cn("select-none text-base leading-6",s?"text-neutral-500":"text-primary-900"),id:o,children:r})]})})};exports.Checkbox=h;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index.cjs10.js"),l=require("react-aria-components"),x=require("./index.cjs11.js"),p=require("./index.cjs18.js"),b=require("./index.cjs14.js"),h=({isIndeterminate:c=!1,isDisabled:s=!1,className:u,children:r,onChange:i,isSelected:n,id:o,...m})=>{const j=(a,t)=>x.cn(b.checkboxVariants({isDisabled:s,isFocusVisible:a,isHovered:t,isSelected:n,label:!!r}));return e.jsxRuntimeExports.jsx(l.Checkbox,{className:x.cn("group flex items-center",u),isSelected:n,isDisabled:s,id:o,onChange:i,...m,children:({isFocusVisible:a,isHovered:t})=>e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx("div",{className:j(a,t),"aria-hidden":"true",children:e.jsxRuntimeExports.jsx(p.MarkIcon,{isIndeterminate:c,isHovered:t,isSelected:n,className:"size-3"})}),r&&e.jsxRuntimeExports.jsx("span",{className:x.cn("select-none text-base leading-6",s?"text-neutral-500":"text-primary-900"),id:o,children:r})]})})};exports.Checkbox=h;

package/dist/index.cjs5.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("./index.cjs10.js"),q=require("react"),n=require("react-aria-components"),R=require("./index.cjs11.js"),g=require("./index.cjs20.js");function v(i,c){const[a,u]=n.useContextProps(i,c,n.ButtonContext),{intent:l="secondary",size:d="lg",isDisabled:o=!1,isActive:x=!1,children:e,className:f,...m}=a,r="flex h-full items-center overflow-hidden whitespace-nowrap";return s.jsxRuntimeExports.jsx(n.Button,{ref:u,className:({isPressed:t,isHovered:p,isFocusVisible:j,isFocused:h})=>R.cn(g.buttonVariants({intent:l,size:d,isDisabled:o,isActive:x||t,isHovered:p,isFocused:j||h}),f),isDisabled:o,...m,children:typeof e=="function"?t=>s.jsxRuntimeExports.jsx("span",{className:r+"p-2.",children:e(t)}):s.jsxRuntimeExports.jsx("span",{className:r,children:e})})}const B=q.forwardRef(v);exports.IconButton=B;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("./index.cjs10.js"),q=require("react"),n=require("react-aria-components"),R=require("./index.cjs11.js"),g=require("./index.cjs17.js");function v(i,c){const[a,u]=n.useContextProps(i,c,n.ButtonContext),{intent:l="secondary",size:d="lg",isDisabled:o=!1,isActive:x=!1,children:e,className:f,...m}=a,r="flex h-full items-center overflow-hidden whitespace-nowrap";return s.jsxRuntimeExports.jsx(n.Button,{ref:u,className:({isPressed:t,isHovered:p,isFocusVisible:j,isFocused:h})=>R.cn(g.buttonVariants({intent:l,size:d,isDisabled:o,isActive:x||t,isHovered:p,isFocused:j||h}),f),isDisabled:o,...m,children:typeof e=="function"?t=>s.jsxRuntimeExports.jsx("span",{className:r+"p-2.",children:e(t)}):s.jsxRuntimeExports.jsx("span",{className:r,children:e})})}const B=q.forwardRef(v);exports.IconButton=B;

package/dist/index.cjs7.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./index.cjs10.js"),l=require("react-aria-components"),a=require("./index.cjs11.js"),d=require("./index.cjs17.js"),q=require("./index.cjs18.js"),y=require("./index.cjs15.js"),R=({children:o,label:i,description:c,errorMessage:x,validationState:u,size:e="md",isDisabled:t=!1,isSelected:r=!1,onChange:f,"aria-label":m,"aria-describedby":h})=>{const j=u==="invalid"&&!t,p=e==="sm"?{offLeft:3,onLeft:19}:{offLeft:4,onLeft:28};return n.jsxRuntimeExports.jsxs("label",{className:a.cn("group flex flex-row gap-2",t?"opacity-40":"opacity-100",(i||o)&&c?"items-start":"items-center"),children:[n.jsxRuntimeExports.jsx(l.Switch,{isDisabled:t,isSelected:r,"aria-checked":r,"aria-label":m,"aria-describedby":h,onChange:f,children:({isFocusVisible:w,isHovered:s})=>n.jsxRuntimeExports.jsx("div",{className:a.cn(y.switchVariants({isSelected:r,isDisabled:t,isFocusVisible:w,size:e,isHoveredWhenOff:s&&!r})),children:n.jsxRuntimeExports.jsx(q.SwitchIndicator,{isSelected:r,isDisabled:t,isHovered:s,size:e,dimensions:p})})}),n.jsxRuntimeExports.jsx(d.ContentSwitch,{label:i,description:c,errorMessage:x,isDisabled:t,isInvalid:j,children:o})]})};exports.Switch=R;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./index.cjs10.js"),p=require("react-aria-components"),c=require("./index.cjs11.js"),q=require("./index.cjs19.js"),R=require("./index.cjs20.js"),v=require("./index.cjs15.js"),E=({children:s,label:i,description:o,errorMessage:x,validationState:u,size:e="md",isDisabled:t=!1,isSelected:n=!1,onChange:f,renderLabelIcon:m=null,"aria-label":h,"aria-describedby":j})=>{const l=u==="invalid"&&!t,w=e==="sm"?{offLeft:3,onLeft:19}:{offLeft:4,onLeft:28};return r.jsxRuntimeExports.jsxs("label",{className:c.cn("group flex flex-row gap-2",(i||s)&&o?"items-start":"items-center"),children:[r.jsxRuntimeExports.jsx(p.Switch,{isDisabled:t,isSelected:n,"aria-checked":n,"aria-label":h,"aria-describedby":j,onChange:f,children:({isFocusVisible:d,isHovered:a})=>r.jsxRuntimeExports.jsx("div",{className:c.cn(v.switchVariants({isSelected:n,isDisabled:t,isFocusVisible:d,size:e,isHoveredWhenOff:a&&!n})),children:r.jsxRuntimeExports.jsx(R.SwitchIndicator,{isSelected:n,isDisabled:t,isHovered:a,size:e,dimensions:w})})}),r.jsxRuntimeExports.jsx(q.ContentSwitch,{label:i,description:o,errorMessage:x,isDisabled:t,isInvalid:l,renderLabelIcon:m,children:s})]})};exports.Switch=E;

package/dist/index.es17.js

@@ -1,17 +1,154 @@
-import { j as t } from "./index.es10.js";
-import { cn as m } from "./index.es11.js";
-const u = ({
-  label: x,
-  description: e,
-  errorMessage: n,
-  isDisabled: s,
-  isInvalid: r,
-  children: l
-}) => !x && !e && !l ? null : /* @__PURE__ */ t.jsxs("div", { className: "flex flex-col", children: [
-  x ? /* @__PURE__ */ t.jsx("p", { className: m("text-sm font-semibold", s ? "text-neutral-600" : "text-neutral-900"), children: x }) : l,
-  e && !n && /* @__PURE__ */ t.jsx("p", { className: m("text-xs", s ? "text-neutral-600" : "text-neutral-800"), children: e }),
-  r && n && /* @__PURE__ */ t.jsx("p", { className: "text-sm text-red-500", children: n })
-] });
+import { cva as e } from "class-variance-authority";
+const i = [
+  {
+    intent: "primary",
+    isHovered: !0,
+    isDisabled: !1,
+    isActive: !1,
+    class: "bg-primary-100"
+  },
+  {
+    intent: "primary",
+    isHovered: !0,
+    isDisabled: !1,
+    isActive: !0,
+    class: "bg-primary-700 text-primary-50"
+  },
+  {
+    intent: "secondary",
+    isHovered: !0,
+    isDisabled: !1,
+    isActive: !1,
+    class: "bg-primary-300"
+  },
+  {
+    intent: "secondary",
+    isHovered: !0,
+    isDisabled: !1,
+    isActive: !0,
+    class: "bg-primary-700 text-primary-50"
+  },
+  {
+    intent: "minimal",
+    isHovered: !0,
+    isDisabled: !1,
+    isActive: !1,
+    class: "bg-neutral-200 text-neutral-800"
+  },
+  {
+    intent: "minimal",
+    isHovered: !0,
+    isDisabled: !1,
+    isActive: !0,
+    class: "bg-neutral-200 text-primary-700"
+  }
+], t = [
+  {
+    intent: "primary",
+    isActive: !0,
+    isDisabled: !1,
+    class: "bg-primary-500 text-primary-50"
+  },
+  {
+    intent: "primary",
+    isActive: !0,
+    isDisabled: !0,
+    class: "bg-primary-300 text-primary-100"
+  },
+  {
+    intent: "secondary",
+    isActive: !0,
+    isDisabled: !1,
+    class: "bg-primary-700 text-primary-50"
+  },
+  {
+    intent: "secondary",
+    isActive: !0,
+    isDisabled: !0,
+    class: "bg-primary-100 text-primary-300"
+  },
+  {
+    intent: "minimal",
+    isActive: !0,
+    isDisabled: !1,
+    class: "text-primary-500"
+  },
+  {
+    intent: "minimal",
+    isActive: !0,
+    isDisabled: !0,
+    class: "text-neutral-700"
+  }
+], s = [
+  {
+    intent: "primary",
+    isDisabled: !0,
+    isActive: !1,
+    class: "text-neutral-600"
+  },
+  {
+    intent: "primary",
+    isDisabled: !0,
+    isActive: !0,
+    class: "bg-primary-300 text-primary-100"
+  },
+  {
+    intent: "secondary",
+    isDisabled: !0,
+    isActive: !1,
+    class: "bg-neutral-400 text-neutral-600"
+  },
+  {
+    intent: "secondary",
+    isDisabled: !0,
+    isActive: !0,
+    class: "bg-primary-100 text-primary-300"
+  },
+  {
+    intent: "minimal",
+    isDisabled: !0,
+    isActive: !1,
+    class: "text-neutral-600"
+  },
+  {
+    intent: "minimal",
+    isDisabled: !0,
+    isActive: !0,
+    class: "text-neutral-700"
+  }
+], a = e(
+  "inline-flex items-center justify-center border border-transparent transition duration-150 ease-in-out",
+  {
+    variants: {
+      intent: {
+        primary: "bg-transparent text-primary-500",
+        secondary: "bg-primary-200 text-primary-500",
+        minimal: "bg-transparent text-neutral-700"
+      },
+      size: {
+        xxs: "p-1",
+        xs: "p-2",
+        sm: "p-2.5",
+        md: "p-3",
+        lg: "p-4"
+      },
+      isDisabled: {
+        true: "pointer-events-none cursor-not-allowed"
+      },
+      isHovered: {
+        true: ""
+      },
+      isActive: {
+        true: ""
+      },
+      isFocused: {
+        false: "",
+        true: "focus:outline-none focus:ring-offset-2 outline-none ring-2 ring-sky-400"
+      }
+    },
+    compoundVariants: [...i, ...t, ...s]
+  }
+);
 export {
-  u as ContentSwitch
+  a as buttonVariants
 };

package/dist/index.es18.js

@@ -1,22 +1,32 @@
-import { j as i } from "./index.es10.js";
-import { cn as m } from "./index.es11.js";
-import { indicatorVariants as n } from "./index.es15.js";
-const c = ({ isSelected: r, isDisabled: o, isHovered: f, size: a, dimensions: t }) => /* @__PURE__ */ i.jsx(
-  "div",
-  {
-    className: m(
-      n({
-        isSelected: r,
-        isDisabled: o,
-        size: a,
-        isHoveredWhenOff: f && !r
-      })
-    ),
-    style: {
-      left: r ? `${t.onLeft}px` : `${t.offLeft}px`
+import { j as e } from "./index.es10.js";
+import { cn as l } from "./index.es11.js";
+const m = (r) => {
+  const { isIndeterminate: t, isSelected: s, className: n, isHovered: a } = r, o = a && !s && !t ? "text-neutral-500" : "", i = !!(o || s);
+  return /* @__PURE__ */ e.jsx("svg", { className: l("stroke-current", o, n), viewBox: "-1 1 17 17", children: t ? /* @__PURE__ */ e.jsx(
+    "line",
+    {
+      x1: 1,
+      y1: 10,
+      x2: 14,
+      y2: 10,
+      fill: "none",
+      strokeWidth: 2,
+      strokeDasharray: 14,
+      strokeDashoffset: s ? 28 : 42,
+      style: { transition: "all 400ms" }
     }
-  }
-);
+  ) : /* @__PURE__ */ e.jsx(
+    "polyline",
+    {
+      points: "1 9 7 14 15 4",
+      fill: "none",
+      strokeWidth: 2,
+      strokeDasharray: 22,
+      strokeDashoffset: i ? 44 : 66,
+      style: { transition: "all 400ms" }
+    }
+  ) });
+};
 export {
-  c as SwitchIndicator
+  m as MarkIcon
 };

package/dist/index.es19.js

@@ -1,32 +1,21 @@
-import { j as e } from "./index.es10.js";
-import { cn as l } from "./index.es11.js";
-const m = (r) => {
-  const { isIndeterminate: t, isSelected: s, className: n, isHovered: a } = r, o = a && !s && !t ? "text-neutral-500" : "", i = !!(o || s);
-  return /* @__PURE__ */ e.jsx("svg", { className: l("stroke-current", o, n), viewBox: "-1 1 17 17", children: t ? /* @__PURE__ */ e.jsx(
-    "line",
-    {
-      x1: 1,
-      y1: 10,
-      x2: 14,
-      y2: 10,
-      fill: "none",
-      strokeWidth: 2,
-      strokeDasharray: 14,
-      strokeDashoffset: s ? 28 : 42,
-      style: { transition: "all 400ms" }
-    }
-  ) : /* @__PURE__ */ e.jsx(
-    "polyline",
-    {
-      points: "1 9 7 14 15 4",
-      fill: "none",
-      strokeWidth: 2,
-      strokeDasharray: 22,
-      strokeDashoffset: i ? 44 : 66,
-      style: { transition: "all 400ms" }
-    }
-  ) });
-};
+import { j as t } from "./index.es10.js";
+import { cn as c } from "./index.es11.js";
+const i = ({
+  label: e,
+  description: x,
+  errorMessage: s,
+  isDisabled: l,
+  isInvalid: r,
+  children: n,
+  renderLabelIcon: m
+}) => !e && !x && !n ? null : /* @__PURE__ */ t.jsxs("div", { className: "flex flex-col", children: [
+  e ? /* @__PURE__ */ t.jsxs("div", { className: "flex items-center gap-x-1", children: [
+    /* @__PURE__ */ t.jsx("p", { className: c("text-sm font-semibold", l ? "text-neutral-600" : "text-neutral-900"), children: e }),
+    m ? /* @__PURE__ */ t.jsx(t.Fragment, { children: m }) : null
+  ] }) : n,
+  x && !s && /* @__PURE__ */ t.jsx("p", { className: c("text-xs", l ? "text-neutral-600" : "text-neutral-800"), children: x }),
+  r && s && /* @__PURE__ */ t.jsx("p", { className: "text-sm text-red-500", children: s })
+] });
 export {
-  m as MarkIcon
+  i as ContentSwitch
 };

package/dist/index.es20.js

@@ -1,154 +1,22 @@
-import { cva as e } from "class-variance-authority";
-const i = [
-  {
-    intent: "primary",
-    isHovered: !0,
-    isDisabled: !1,
-    isActive: !1,
-    class: "bg-primary-100"
-  },
-  {
-    intent: "primary",
-    isHovered: !0,
-    isDisabled: !1,
-    isActive: !0,
-    class: "bg-primary-700 text-primary-50"
-  },
-  {
-    intent: "secondary",
-    isHovered: !0,
-    isDisabled: !1,
-    isActive: !1,
-    class: "bg-primary-300"
-  },
-  {
-    intent: "secondary",
-    isHovered: !0,
-    isDisabled: !1,
-    isActive: !0,
-    class: "bg-primary-700 text-primary-50"
-  },
-  {
-    intent: "minimal",
-    isHovered: !0,
-    isDisabled: !1,
-    isActive: !1,
-    class: "bg-neutral-200 text-neutral-800"
-  },
-  {
-    intent: "minimal",
-    isHovered: !0,
-    isDisabled: !1,
-    isActive: !0,
-    class: "bg-neutral-200 text-primary-700"
-  }
-], t = [
-  {
-    intent: "primary",
-    isActive: !0,
-    isDisabled: !1,
-    class: "bg-primary-500 text-primary-50"
-  },
-  {
-    intent: "primary",
-    isActive: !0,
-    isDisabled: !0,
-    class: "bg-primary-300 text-primary-100"
-  },
-  {
-    intent: "secondary",
-    isActive: !0,
-    isDisabled: !1,
-    class: "bg-primary-700 text-primary-50"
-  },
-  {
-    intent: "secondary",
-    isActive: !0,
-    isDisabled: !0,
-    class: "bg-primary-100 text-primary-300"
-  },
-  {
-    intent: "minimal",
-    isActive: !0,
-    isDisabled: !1,
-    class: "text-primary-500"
-  },
-  {
-    intent: "minimal",
-    isActive: !0,
-    isDisabled: !0,
-    class: "text-neutral-700"
-  }
-], s = [
-  {
-    intent: "primary",
-    isDisabled: !0,
-    isActive: !1,
-    class: "text-neutral-600"
-  },
-  {
-    intent: "primary",
-    isDisabled: !0,
-    isActive: !0,
-    class: "bg-primary-300 text-primary-100"
-  },
-  {
-    intent: "secondary",
-    isDisabled: !0,
-    isActive: !1,
-    class: "bg-neutral-400 text-neutral-600"
-  },
-  {
-    intent: "secondary",
-    isDisabled: !0,
-    isActive: !0,
-    class: "bg-primary-100 text-primary-300"
-  },
-  {
-    intent: "minimal",
-    isDisabled: !0,
-    isActive: !1,
-    class: "text-neutral-600"
-  },
-  {
-    intent: "minimal",
-    isDisabled: !0,
-    isActive: !0,
-    class: "text-neutral-700"
-  }
-], a = e(
-  "inline-flex items-center justify-center border border-transparent transition duration-150 ease-in-out",
-  {
-    variants: {
-      intent: {
-        primary: "bg-transparent text-primary-500",
-        secondary: "bg-primary-200 text-primary-500",
-        minimal: "bg-transparent text-neutral-700"
-      },
-      size: {
-        xxs: "p-1",
-        xs: "p-2",
-        sm: "p-2.5",
-        md: "p-3",
-        lg: "p-4"
-      },
-      isDisabled: {
-        true: "pointer-events-none cursor-not-allowed"
-      },
-      isHovered: {
-        true: ""
-      },
-      isActive: {
-        true: ""
-      },
-      isFocused: {
-        false: "",
-        true: "focus:outline-none focus:ring-offset-2 outline-none ring-2 ring-sky-400"
-      }
-    },
-    compoundVariants: [...i, ...t, ...s]
+import { j as i } from "./index.es10.js";
+import { cn as m } from "./index.es11.js";
+import { indicatorVariants as n } from "./index.es15.js";
+const c = ({ isSelected: r, isDisabled: o, isHovered: f, size: a, dimensions: t }) => /* @__PURE__ */ i.jsx(
+  "div",
+  {
+    className: m(
+      n({
+        isSelected: r,
+        isDisabled: o,
+        size: a,
+        isHoveredWhenOff: f && !r
+      })
+    ),
+    style: {
+      left: r ? `${t.onLeft}px` : `${t.offLeft}px`
+    }
   }
 );
 export {
-  a as buttonVariants
+  c as SwitchIndicator
 };

package/dist/index.es4.js

@@ -1,7 +1,7 @@
 import { j as e } from "./index.es10.js";
 import { Checkbox as h } from "react-aria-components";
 import { cn as m } from "./index.es11.js";
-import { MarkIcon as i } from "./index.es19.js";
+import { MarkIcon as i } from "./index.es18.js";
 import { checkboxVariants as j } from "./index.es14.js";
 const g = ({
   isIndeterminate: x = !1,

package/dist/index.es5.js

@@ -2,7 +2,7 @@ import { j as s } from "./index.es10.js";
 import { forwardRef as j } from "react";
 import { useContextProps as B, ButtonContext as w, Button as C } from "react-aria-components";
 import { cn as N } from "./index.es11.js";
-import { buttonVariants as g } from "./index.es20.js";
+import { buttonVariants as g } from "./index.es17.js";
 function v(r, i) {
   const [c, a] = B(r, i, w), {
     intent: m = "secondary",

package/dist/index.es7.js

@@ -1,59 +1,56 @@
 import { j as o } from "./index.es10.js";
-import { Switch as y } from "react-aria-components";
-import { cn as i } from "./index.es11.js";
-import { ContentSwitch as L } from "./index.es17.js";
-import { SwitchIndicator as d } from "./index.es18.js";
-import { switchVariants as u } from "./index.es15.js";
-const C = ({
+import { Switch as u } from "react-aria-components";
+import { cn as c } from "./index.es11.js";
+import { ContentSwitch as L } from "./index.es19.js";
+import { SwitchIndicator as v } from "./index.es20.js";
+import { switchVariants as b } from "./index.es15.js";
+const E = ({
   children: f,
   label: m,
   description: n,
   errorMessage: s,
-  validationState: p,
+  validationState: e,
   size: a = "md",
   isDisabled: r = !1,
   isSelected: t = !1,
-  onChange: e,
-  "aria-label": h,
-  "aria-describedby": x
+  onChange: h,
+  renderLabelIcon: x = null,
+  "aria-label": p,
+  "aria-describedby": l
 }) => {
-  const j = p === "invalid" && !r, w = a === "sm" ? { offLeft: 3, onLeft: 19 } : { offLeft: 4, onLeft: 28 };
+  const j = e === "invalid" && !r, w = a === "sm" ? { offLeft: 3, onLeft: 19 } : { offLeft: 4, onLeft: 28 };
   return /* @__PURE__ */ o.jsxs(
     "label",
     {
-      className: i(
-        "group flex flex-row gap-2",
-        r ? "opacity-40" : "opacity-100",
-        (m || f) && n ? "items-start" : "items-center"
-      ),
+      className: c("group flex flex-row gap-2", (m || f) && n ? "items-start" : "items-center"),
       children: [
         /* @__PURE__ */ o.jsx(
-          y,
+          u,
           {
             isDisabled: r,
             isSelected: t,
             "aria-checked": t,
-            "aria-label": h,
-            "aria-describedby": x,
-            onChange: e,
-            children: ({ isFocusVisible: l, isHovered: c }) => /* @__PURE__ */ o.jsx(
+            "aria-label": p,
+            "aria-describedby": l,
+            onChange: h,
+            children: ({ isFocusVisible: d, isHovered: i }) => /* @__PURE__ */ o.jsx(
               "div",
               {
-                className: i(
-                  u({
+                className: c(
+                  b({
                     isSelected: t,
                     isDisabled: r,
-                    isFocusVisible: l,
+                    isFocusVisible: d,
                     size: a,
-                    isHoveredWhenOff: c && !t
+                    isHoveredWhenOff: i && !t
                   })
                 ),
                 children: /* @__PURE__ */ o.jsx(
-                  d,
+                  v,
                   {
                     isSelected: t,
                     isDisabled: r,
-                    isHovered: c,
+                    isHovered: i,
                     size: a,
                     dimensions: w
                   }
@@ -70,6 +67,7 @@ const C = ({
             errorMessage: s,
             isDisabled: r,
             isInvalid: j,
+            renderLabelIcon: x,
             children: f
           }
         )
@@ -78,5 +76,5 @@ const C = ({
   );
 };
 export {
-  C as Switch
+  E as Switch
 };

package/dist/stories/Switch.stories.d.ts

@@ -2,7 +2,7 @@ import { StoryObj } from '@storybook/react';
 
 declare const meta: {
     title: string;
-    component: ({ children, label, description, errorMessage, validationState, size, isDisabled, isSelected, onChange, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, }: import('../components').SwitchProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ children, label, description, errorMessage, validationState, size, isDisabled, isSelected, onChange, renderLabelIcon, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, }: import('../components').SwitchProps) => import("react/jsx-runtime").JSX.Element;
     parameters: {
         layout: string;
     };
@@ -27,3 +27,4 @@ type Story = StoryObj<typeof meta>;
 export declare const Primary: Story;
 export declare const DisabledSelected: Story;
 export declare const DisabledUnselected: Story;
+export declare const LabelAndIcon: Story;

package/dist/style.css

@@ -783,6 +783,10 @@ select {
   width: 1rem;
   height: 1rem;
 }
+.size-5 {
+  width: 1.25rem;
+  height: 1.25rem;
+}
 .size-6 {
   width: 1.5rem;
   height: 1.5rem;
@@ -929,6 +933,10 @@ select {
 .gap-2 {
   gap: 0.5rem;
 }
+.gap-x-1 {
+  -moz-column-gap: 0.25rem;
+       column-gap: 0.25rem;
+}
 .gap-x-2 {
   -moz-column-gap: 0.5rem;
        column-gap: 0.5rem;
@@ -1120,6 +1128,10 @@ select {
   --tw-bg-opacity: 1;
   background-color: rgb(255 229 152 / var(--tw-bg-opacity));
 }
+.bg-yellow-warning-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 220 115 / var(--tw-bg-opacity));
+}
 .bg-yellow-warning-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(255 204 51 / var(--tw-bg-opacity));
@@ -1343,11 +1355,9 @@ select {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
-.opacity-100 {
-  opacity: 1;
-}
-.opacity-40 {
-  opacity: 0.4;
+.text-yellow-warning-900 {
+  --tw-text-opacity: 1;
+  color: rgb(111 87 17 / var(--tw-text-opacity));
 }
 .opacity-70 {
   opacity: 0.7;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simpli-route/apollo-ds",
-  "version": "0.0.18",
+  "version": "0.0.19",
   "type": "module",
   "files": [
     "dist"