@okta/odyssey-contribution-tooling 1.49.0 → 1.51.0

package/dist/assets/CheckboxGroup.stories-C8yW7qIA.js

@@ -0,0 +1,89 @@
+import{j as r}from"./jsx-runtime-CnH95YSl.js";import{O as K}from"./OdysseyStorybookThemeDecorator-DsQ8XVOG.js";import{f as s}from"./fieldComponentPropsMetaData-kU3Yruac.js";import{M as b}from"./CheckboxGroup-BbhvyMBP.js";import{M as t}from"./Checkbox-LVOv88W2.js";import{M as N}from"./Link-P2sjP-aD.js";import"./index-NdkWRN8K.js";import"./_commonjsHelpers-gnU0ypJ3.js";import"./OdysseyThemeProvider-uYQ_l8PJ.js";import"./index-BJTM6NaI.js";import"./OdysseyProvider-YUKfsUrL.js";import"./Field-BVmhMv9m.js";import"./Box-XLjSpNxK.js";import"./Box-C-xmRxaS.js";import"./createBox-emhTu6dS.js";import"./List-BcG-NsbC.js";import"./ListItem-Bv1M9lel.js";import"./utils-iop7lDec.js";import"./useFormControl-BMISTZuX.js";import"./FormLabel-C4KesWyd.js";import"./useIsFocusVisible-DH0qxT5e.js";import"./isHostComponent-DVu5iVWx.js";import"./ButtonBase-Wolvis_2.js";import"./assertThisInitialized-B9jnkVVz.js";import"./inheritsLoose-6wpAF9yl.js";import"./TransitionGroupContext-DAL84N7p.js";import"./ScreenReaderText-CQNs2mcT.js";import"./visuallyHidden-Dan1xhjv.js";import"./FormHelperText-CZEj6vhF.js";import"./FieldHint-BFs7d7f5.js";import"./Typography-gfYWxfhb.js";import"./Typography-BIFhmR2K.js";import"./useUniqueId-DUzAQ6pl.js";import"./createUniqueId-BHjR7HQF.js";import"./FormGroup-B2pOz0HL.js";import"./inputUtils-Dbi8XkA6.js";import"./Hint-qhf1AEE0.js";import"./FormControlLabel-0yOoM5iA.js";import"./Stack-Co_ZNMgX.js";import"./createStyled-B09qmfVW.js";import"./useThemeProps-4A-zY4M2.js";import"./Checkbox-DGd8S5xK.js";import"./SwitchBase-DDdOwpAs.js";import"./useControlled-NQulfz4l.js";import"./createSvgIcon-SdTF6s8l.js";import"./Link-LYj8-DeM.js";import"./ExternalLink-C7UPr4SL.js";const ze={component:b,decorators:[K],tags:["autodocs"],argTypes:{children:{control:!1,description:"A single Checkbox element or an array of Checkbox elements",table:{category:"Functional",type:{summary:"ReactElement<typeof Checkbox> | Array<ReactElement<typeof Checkbox>>"}},type:{required:!0,name:"other",value:"ReactElement<typeof Checkbox> | Array<ReactElement<typeof Checkbox>>"}},errorMessage:s.errorMessage,errorMessageList:s.errorMessageList,hint:s.hint,HintLinkComponent:s.HintLinkComponent,isDisabled:s.isDisabled,isReadOnly:{control:"boolean",description:"If `true`, the checkbox group is read-only",table:{category:"Visual",type:{summary:"boolean"},defaultValue:{summary:"false"}}},isRequired:{control:"boolean",description:"If `true`, the checkbox group is required",table:{category:"Visual",type:{summary:"boolean"},defaultValue:{summary:"false"}}},label:{control:"text",description:"The label text for the checkbox group",table:{category:"Visual",type:{summary:"string"}},type:{required:!0,name:"string"}},ariaDescribedBy:{control:"text",description:"The ID of the element that describes the checkbox group",table:{category:"Functional",type:{summary:"string"}},type:{name:"string"}},testId:{control:"text",description:"The data-testid attribute for the checkbox group",table:{category:"Functional",type:{summary:"string"}},type:{name:"string"}},translate:{control:"radio",options:["yes","no",void 0],description:"Indicates whether the element's content should be translated",table:{category:"Functional",type:{summary:"yes | no"}},type:{name:"string"}}},args:{label:"Label",isDisabled:!1,isReadOnly:!1,isRequired:!1}},a={args:{},render:e=>r.jsxs(b,{ariaDescribedBy:e.ariaDescribedBy,errorMessage:e.errorMessage,errorMessageList:e.errorMessageList,hint:e.hint,HintLinkComponent:e.HintLinkComponent,isDisabled:e.isDisabled,isReadOnly:e.isReadOnly,isRequired:e.isRequired,label:e.label,testId:e.testId,translate:e.translate,children:[r.jsx(t,{label:"Item label 1",name:"item-1",value:"item-1"}),r.jsx(t,{label:"Item label 2",name:"item-2",value:"item-2"}),r.jsx(t,{label:"Item label 3",name:"item-3",value:"item-3"})]}),parameters:{controls:{exclude:["isDefaultChecked","isIndeterminate"]}}},i={...a},o={...a,parameters:{controls:{exclude:["isDefaultChecked","isIndeterminate"]}},args:{isDisabled:!0}},n={...a,parameters:{controls:{exclude:["isDefaultChecked","isIndeterminate"]}},args:{isReadOnly:!0}},l={...a,parameters:{controls:{exclude:["isDefaultChecked","isIndeterminate"]},docs:{description:{story:"Unlike Radio Buttons, Checkboxes validate individually, not as a group. Validity must be set individually on each checkbox using the `isInvalid` prop, even if the group has an `errorMessage` set."}}},args:{errorMessage:"Error Message"}},c={...a,args:{isRequired:!0,errorMessage:"Error Message",errorMessageList:["Error A"]}},m={...a,render:function(J){return r.jsxs(b,{...J,children:[r.jsx(t,{hint:"Hint text 1",label:"Item label 1",name:"item-1",value:"item-1"}),r.jsx(t,{hint:"Hint text 2",label:"Item label 2",name:"item-2",value:"item-2"}),r.jsx(t,{hint:"Hint text 3",label:"Item label 3",name:"item-3",value:"item-3"})]})}},p={...a,args:{hint:"Hint text"}},d={...a,args:{hint:"Hint text",HintLinkComponent:r.jsx(N,{href:"#link",children:"Link"})}},u={...a,args:{isRequired:!0}},h={render:e=>r.jsxs(b,{errorMessage:e.errorMessage,hint:e.hint,isDisabled:e.isDisabled,isRequired:e.isRequired,label:"Label",children:[r.jsx(t,{isDefaultChecked:!0,label:"Item label 1",name:"item-1",value:"item-1"}),r.jsx(t,{label:"Item label 2",name:"item-2",validity:"valid",value:"item-2"}),r.jsx(t,{isDefaultChecked:!0,label:"Item Label 3",name:"item-3",value:"item-3"})]}),parameters:{controls:{exclude:["isDefaultChecked","isIndeterminate"]},docs:{description:{story:"Individual checkboxes can take a different validity than the whole group; if a group is invalid, individual checkboxes can be marked valid, and vice versa. This is particularly useful in cases where the state of particular checkboxes affect the validity of the entire group."}}},args:{errorMessage:"Error Message"}};var k,x,g;i.parameters={...i.parameters,docs:{...(k=i.parameters)==null?void 0:k.docs,source:{originalSource:`{
+  ...GroupTemplate
+}`,...(g=(x=i.parameters)==null?void 0:x.docs)==null?void 0:g.source}}};var y,f,C;o.parameters={...o.parameters,docs:{...(y=o.parameters)==null?void 0:y.docs,source:{originalSource:`{
+  ...GroupTemplate,
+  parameters: {
+    controls: {
+      exclude: ["isDefaultChecked", "isIndeterminate"]
+    }
+  },
+  args: {
+    isDisabled: true
+  } as CheckboxGroupProps // This is a hack
+}`,...(C=(f=o.parameters)==null?void 0:f.docs)==null?void 0:C.source}}};var v,I,M;n.parameters={...n.parameters,docs:{...(v=n.parameters)==null?void 0:v.docs,source:{originalSource:`{
+  ...GroupTemplate,
+  parameters: {
+    controls: {
+      exclude: ["isDefaultChecked", "isIndeterminate"]
+    }
+  },
+  args: {
+    isReadOnly: true
+  } as CheckboxGroupProps // This is a hack
+}`,...(M=(I=n.parameters)==null?void 0:I.docs)==null?void 0:M.source}}};var D,R,L;l.parameters={...l.parameters,docs:{...(D=l.parameters)==null?void 0:D.docs,source:{originalSource:`{
+  ...GroupTemplate,
+  parameters: {
+    controls: {
+      exclude: ["isDefaultChecked", "isIndeterminate"]
+    },
+    docs: {
+      description: {
+        story: "Unlike Radio Buttons, Checkboxes validate individually, not as a group. Validity must be set individually on each checkbox using the \`isInvalid\` prop, even if the group has an \`errorMessage\` set."
+      }
+    }
+  },
+  args: {
+    errorMessage: "Error Message"
+  } as CheckboxGroupProps // This is a hack
+}`,...(L=(R=l.parameters)==null?void 0:R.docs)==null?void 0:L.source}}};var T,G,E;c.parameters={...c.parameters,docs:{...(T=c.parameters)==null?void 0:T.docs,source:{originalSource:`{
+  ...GroupTemplate,
+  args: {
+    isRequired: true,
+    errorMessage: "Error Message",
+    errorMessageList: ["Error A"]
+  } as CheckboxGroupProps // This is a hack
+}`,...(E=(G=c.parameters)==null?void 0:G.docs)==null?void 0:E.source}}};var H,q,j;m.parameters={...m.parameters,docs:{...(H=m.parameters)==null?void 0:H.docs,source:{originalSource:`{
+  ...GroupTemplate,
+  render: function C(props) {
+    return <CheckboxGroup {...props}>
+        <Checkbox hint="Hint text 1" label="Item label 1" name="item-1" value="item-1" />
+        <Checkbox hint="Hint text 2" label="Item label 2" name="item-2" value="item-2" />
+        <Checkbox hint="Hint text 3" label="Item label 3" name="item-3" value="item-3" />
+      </CheckboxGroup>;
+  }
+}`,...(j=(q=m.parameters)==null?void 0:q.docs)==null?void 0:j.source}}};var O,S,P;p.parameters={...p.parameters,docs:{...(O=p.parameters)==null?void 0:O.docs,source:{originalSource:`{
+  ...GroupTemplate,
+  args: {
+    hint: "Hint text"
+  } as CheckboxGroupProps // This is a hack
+}`,...(P=(S=p.parameters)==null?void 0:S.docs)==null?void 0:P.source}}};var V,w,A;d.parameters={...d.parameters,docs:{...(V=d.parameters)==null?void 0:V.docs,source:{originalSource:`{
+  ...GroupTemplate,
+  args: {
+    hint: "Hint text",
+    HintLinkComponent: <Link href="#link">Link</Link>
+  } as CheckboxGroupProps // This is a hack
+}`,...(A=(w=d.parameters)==null?void 0:w.docs)==null?void 0:A.source}}};var B,F,z;u.parameters={...u.parameters,docs:{...(B=u.parameters)==null?void 0:B.docs,source:{originalSource:`{
+  ...GroupTemplate,
+  args: {
+    isRequired: true
+  } as CheckboxGroupProps // This is a hack
+}`,...(z=(F=u.parameters)==null?void 0:F.docs)==null?void 0:z.source}}};var U,W,_;h.parameters={...h.parameters,docs:{...(U=h.parameters)==null?void 0:U.docs,source:{originalSource:`{
+  render: args => <CheckboxGroup errorMessage={args.errorMessage} hint={args.hint} isDisabled={args.isDisabled} isRequired={args.isRequired} label="Label">
+      <Checkbox isDefaultChecked={true} label="Item label 1" name="item-1" value="item-1" />
+      <Checkbox label="Item label 2" name="item-2" validity="valid" value="item-2" />
+      <Checkbox isDefaultChecked={true} label="Item Label 3" name="item-3" value="item-3" />
+    </CheckboxGroup>,
+  parameters: {
+    controls: {
+      exclude: ["isDefaultChecked", "isIndeterminate"]
+    },
+    docs: {
+      description: {
+        story: "Individual checkboxes can take a different validity than the whole group; if a group is invalid, individual checkboxes can be marked valid, and vice versa. This is particularly useful in cases where the state of particular checkboxes affect the validity of the entire group."
+      }
+    }
+  },
+  args: {
+    errorMessage: "Error Message"
+  } as CheckboxGroupProps // This is a hack
+}`,...(_=(W=h.parameters)==null?void 0:W.docs)==null?void 0:_.source}}};const Ue=["Default","Disabled","ReadOnly","Error","ErrorsList","ErrorWithIndividualHint","Hint","HintLink","Required","MixedError"];export{i as Default,o as Disabled,l as Error,m as ErrorWithIndividualHint,c as ErrorsList,p as Hint,d as HintLink,h as MixedError,n as ReadOnly,u as Required,Ue as __namedExportsOrder,ze as default};

package/dist/assets/ChevronRight-BEaWGMzi.js

@@ -0,0 +1 @@
+import{r}from"./index-NdkWRN8K.js";import{j as o}from"./jsx-runtime-CnH95YSl.js";import{S as n}from"./OdysseyThemeProvider-uYQ_l8PJ.js";const s=r.forwardRef((e,t)=>o.jsx(n,{fill:"none",ref:t,viewBox:"0 0 16 16",xmlns:"http://www.w3.org/2000/svg",...e,children:o.jsx(o.Fragment,{children:o.jsx("path",{d:"m11.138 8.471-4.333 4.334-.943-.943L9.724 8 5.862 4.138l.943-.943 4.333 4.334a.667.667 0 0 1 0 .942Z",fill:"currentColor"})})})),i=r.memo(s);i.displayName="ChevronRightIcon";export{i as M};

package/dist/assets/ChevronUp-BclvDZ6e.js

@@ -0,0 +1 @@
+import{r as o}from"./index-NdkWRN8K.js";import{j as e}from"./jsx-runtime-CnH95YSl.js";import{S as n}from"./OdysseyThemeProvider-uYQ_l8PJ.js";const t=o.forwardRef((r,l)=>e.jsx(n,{fill:"none",ref:l,viewBox:"0 0 16 16",xmlns:"http://www.w3.org/2000/svg",...r,children:e.jsxs(e.Fragment,{children:[e.jsx("path",{clipRule:"evenodd",d:"M7.293 5.431a1 1 0 0 1 1.414 0l4.098 4.098-.943.942L8 6.61l-3.862 3.862-.943-.942 4.098-4.1.471.471-.471-.471Z",fill:"currentColor",fillRule:"evenodd"}),e.jsx("path",{clipRule:"evenodd",d:"m8.707 5.431 4.098 4.098-.943.942L8 6.61l-3.862 3.862-.943-.942 4.098-4.1a1 1 0 0 1 1.414 0Z",fill:"currentColor",fillRule:"evenodd"})]})})),s=o.memo(t);s.displayName="ChevronUpIcon";export{s as M};

package/dist/assets/Chip-p4lq04qX.js

@@ -0,0 +1 @@
+import{c as G,_ as J,b as d,d as k,s as m,e as r,f as Q,ag as X,ah as l,n as p}from"./OdysseyThemeProvider-uYQ_l8PJ.js";import{r as v}from"./index-NdkWRN8K.js";import{c as Y}from"./createSvgIcon-SdTF6s8l.js";import{j as x}from"./jsx-runtime-CnH95YSl.js";import{u as Z}from"./useIsFocusVisible-DH0qxT5e.js";import{B as K}from"./ButtonBase-Wolvis_2.js";const S=Y(x.jsx("path",{d:"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"}),"Cancel"),w=["avatar","className","clickable","color","component","deleteIcon","disabled","icon","label","onClick","onDelete","onKeyDown","onKeyUp","size","variant","tabIndex","skipFocusWhenDisabled"],aa=a=>{const{classes:o,disabled:n,size:c,color:e,iconColor:f,onDelete:u,clickable:t,variant:s}=a,$={root:["root",s,n&&"disabled",`size${r(c)}`,`color${r(e)}`,t&&"clickable",t&&`clickableColor${r(e)}`,u&&"deletable",u&&`deletableColor${r(e)}`,`${s}${r(e)}`],label:["label",`label${r(c)}`],avatar:["avatar",`avatar${r(c)}`,`avatarColor${r(e)}`],icon:["icon",`icon${r(c)}`,`iconColor${r(f)}`],deleteIcon:["deleteIcon",`deleteIcon${r(c)}`,`deleteIconColor${r(e)}`,`deleteIcon${r(s)}Color${r(e)}`]};return Q($,X,o)},oa=m("div",{name:"MuiChip",slot:"Root",overridesResolver:(a,o)=>{const{ownerState:n}=a,{color:c,iconColor:e,clickable:f,onDelete:u,size:t,variant:s}=n;return[{[`& .${l.avatar}`]:o.avatar},{[`& .${l.avatar}`]:o[`avatar${r(t)}`]},{[`& .${l.avatar}`]:o[`avatarColor${r(c)}`]},{[`& .${l.icon}`]:o.icon},{[`& .${l.icon}`]:o[`icon${r(t)}`]},{[`& .${l.icon}`]:o[`iconColor${r(e)}`]},{[`& .${l.deleteIcon}`]:o.deleteIcon},{[`& .${l.deleteIcon}`]:o[`deleteIcon${r(t)}`]},{[`& .${l.deleteIcon}`]:o[`deleteIconColor${r(c)}`]},{[`& .${l.deleteIcon}`]:o[`deleteIcon${r(s)}Color${r(c)}`]},o.root,o[`size${r(t)}`],o[`color${r(c)}`],f&&o.clickable,f&&c!=="default"&&o[`clickableColor${r(c)})`],u&&o.deletable,u&&c!=="default"&&o[`deletableColor${r(c)}`],o[s],o[`${s}${r(c)}`]]}})(({theme:a,ownerState:o})=>{const n=a.palette.mode==="light"?a.palette.grey[700]:a.palette.grey[300];return d({maxWidth:"100%",fontFamily:a.typography.fontFamily,fontSize:a.typography.pxToRem(13),display:"inline-flex",alignItems:"center",justifyContent:"center",height:32,color:(a.vars||a).palette.text.primary,backgroundColor:(a.vars||a).palette.action.selected,borderRadius:32/2,whiteSpace:"nowrap",transition:a.transitions.create(["background-color","box-shadow"]),cursor:"unset",outline:0,textDecoration:"none",border:0,padding:0,verticalAlign:"middle",boxSizing:"border-box",[`&.${l.disabled}`]:{opacity:(a.vars||a).palette.action.disabledOpacity,pointerEvents:"none"},[`& .${l.avatar}`]:{marginLeft:5,marginRight:-6,width:24,height:24,color:a.vars?a.vars.palette.Chip.defaultAvatarColor:n,fontSize:a.typography.pxToRem(12)},[`& .${l.avatarColorPrimary}`]:{color:(a.vars||a).palette.primary.contrastText,backgroundColor:(a.vars||a).palette.primary.dark},[`& .${l.avatarColorSecondary}`]:{color:(a.vars||a).palette.secondary.contrastText,backgroundColor:(a.vars||a).palette.secondary.dark},[`& .${l.avatarSmall}`]:{marginLeft:4,marginRight:-4,width:18,height:18,fontSize:a.typography.pxToRem(10)},[`& .${l.icon}`]:d({marginLeft:5,marginRight:-6},o.size==="small"&&{fontSize:18,marginLeft:4,marginRight:-4},o.iconColor===o.color&&d({color:a.vars?a.vars.palette.Chip.defaultIconColor:n},o.color!=="default"&&{color:"inherit"})),[`& .${l.deleteIcon}`]:d({WebkitTapHighlightColor:"transparent",color:a.vars?`rgba(${a.vars.palette.text.primaryChannel} / 0.26)`:p.alpha(a.palette.text.primary,.26),fontSize:22,cursor:"pointer",margin:"0 5px 0 -6px","&:hover":{color:a.vars?`rgba(${a.vars.palette.text.primaryChannel} / 0.4)`:p.alpha(a.palette.text.primary,.4)}},o.size==="small"&&{fontSize:16,marginRight:4,marginLeft:-4},o.color!=="default"&&{color:a.vars?`rgba(${a.vars.palette[o.color].contrastTextChannel} / 0.7)`:p.alpha(a.palette[o.color].contrastText,.7),"&:hover, &:active":{color:(a.vars||a).palette[o.color].contrastText}})},o.size==="small"&&{height:24},o.color!=="default"&&{backgroundColor:(a.vars||a).palette[o.color].main,color:(a.vars||a).palette[o.color].contrastText},o.onDelete&&{[`&.${l.focusVisible}`]:{backgroundColor:a.vars?`rgba(${a.vars.palette.action.selectedChannel} / calc(${a.vars.palette.action.selectedOpacity} + ${a.vars.palette.action.focusOpacity}))`:p.alpha(a.palette.action.selected,a.palette.action.selectedOpacity+a.palette.action.focusOpacity)}},o.onDelete&&o.color!=="default"&&{[`&.${l.focusVisible}`]:{backgroundColor:(a.vars||a).palette[o.color].dark}})},({theme:a,ownerState:o})=>d({},o.clickable&&{userSelect:"none",WebkitTapHighlightColor:"transparent",cursor:"pointer","&:hover":{backgroundColor:a.vars?`rgba(${a.vars.palette.action.selectedChannel} / calc(${a.vars.palette.action.selectedOpacity} + ${a.vars.palette.action.hoverOpacity}))`:p.alpha(a.palette.action.selected,a.palette.action.selectedOpacity+a.palette.action.hoverOpacity)},[`&.${l.focusVisible}`]:{backgroundColor:a.vars?`rgba(${a.vars.palette.action.selectedChannel} / calc(${a.vars.palette.action.selectedOpacity} + ${a.vars.palette.action.focusOpacity}))`:p.alpha(a.palette.action.selected,a.palette.action.selectedOpacity+a.palette.action.focusOpacity)},"&:active":{boxShadow:(a.vars||a).shadows[1]}},o.clickable&&o.color!=="default"&&{[`&:hover, &.${l.focusVisible}`]:{backgroundColor:(a.vars||a).palette[o.color].dark}}),({theme:a,ownerState:o})=>d({},o.variant==="outlined"&&{backgroundColor:"transparent",border:a.vars?`1px solid ${a.vars.palette.Chip.defaultBorder}`:`1px solid ${a.palette.mode==="light"?a.palette.grey[400]:a.palette.grey[700]}`,[`&.${l.clickable}:hover`]:{backgroundColor:(a.vars||a).palette.action.hover},[`&.${l.focusVisible}`]:{backgroundColor:(a.vars||a).palette.action.focus},[`& .${l.avatar}`]:{marginLeft:4},[`& .${l.avatarSmall}`]:{marginLeft:2},[`& .${l.icon}`]:{marginLeft:4},[`& .${l.iconSmall}`]:{marginLeft:2},[`& .${l.deleteIcon}`]:{marginRight:5},[`& .${l.deleteIconSmall}`]:{marginRight:3}},o.variant==="outlined"&&o.color!=="default"&&{color:(a.vars||a).palette[o.color].main,border:`1px solid ${a.vars?`rgba(${a.vars.palette[o.color].mainChannel} / 0.7)`:p.alpha(a.palette[o.color].main,.7)}`,[`&.${l.clickable}:hover`]:{backgroundColor:a.vars?`rgba(${a.vars.palette[o.color].mainChannel} / ${a.vars.palette.action.hoverOpacity})`:p.alpha(a.palette[o.color].main,a.palette.action.hoverOpacity)},[`&.${l.focusVisible}`]:{backgroundColor:a.vars?`rgba(${a.vars.palette[o.color].mainChannel} / ${a.vars.palette.action.focusOpacity})`:p.alpha(a.palette[o.color].main,a.palette.action.focusOpacity)},[`& .${l.deleteIcon}`]:{color:a.vars?`rgba(${a.vars.palette[o.color].mainChannel} / 0.7)`:p.alpha(a.palette[o.color].main,.7),"&:hover, &:active":{color:(a.vars||a).palette[o.color].main}}})),la=m("span",{name:"MuiChip",slot:"Label",overridesResolver:(a,o)=>{const{ownerState:n}=a,{size:c}=n;return[o.label,o[`label${r(c)}`]]}})(({ownerState:a})=>d({overflow:"hidden",textOverflow:"ellipsis",paddingLeft:12,paddingRight:12,whiteSpace:"nowrap"},a.variant==="outlined"&&{paddingLeft:11,paddingRight:11},a.size==="small"&&{paddingLeft:8,paddingRight:8},a.size==="small"&&a.variant==="outlined"&&{paddingLeft:7,paddingRight:7}));function j(a){return a.key==="Backspace"||a.key==="Delete"}const sa=v.forwardRef(function(o,n){const c=G({props:o,name:"MuiChip"}),{avatar:e,className:f,clickable:u,color:t="default",component:s,deleteIcon:$,disabled:y=!1,icon:C,label:U,onClick:O,onDelete:g,onKeyDown:L,onKeyUp:T,size:W="medium",variant:B="filled",tabIndex:F,skipFocusWhenDisabled:M=!1}=c,_=J(c,w),I=v.useRef(null),h=Z(I,n),E=i=>{i.stopPropagation(),g&&g(i)},A=i=>{i.currentTarget===i.target&&j(i)&&i.preventDefault(),L&&L(i)},H=i=>{i.currentTarget===i.target&&(g&&j(i)?g(i):i.key==="Escape"&&I.current&&I.current.blur()),T&&T(i)},R=u!==!1&&O?!0:u,z=R||g?K:s||"div",D=d({},c,{component:z,disabled:y,size:W,color:t,iconColor:v.isValidElement(C)&&C.props.color||t,onDelete:!!g,clickable:R,variant:B}),b=aa(D),q=z===K?d({component:s||"div",focusVisibleClassName:b.focusVisible},g&&{disableRipple:!0}):{};let N=null;g&&(N=$&&v.isValidElement($)?v.cloneElement($,{className:k($.props.className,b.deleteIcon),onClick:E}):x.jsx(S,{className:k(b.deleteIcon),onClick:E}));let V=null;e&&v.isValidElement(e)&&(V=v.cloneElement(e,{className:k(b.avatar,e.props.className)}));let P=null;return C&&v.isValidElement(C)&&(P=v.cloneElement(C,{className:k(b.icon,C.props.className)})),x.jsxs(oa,d({as:z,className:k(b.root,f),disabled:R&&y?!0:void 0,onClick:O,onKeyDown:A,onKeyUp:H,ref:h,tabIndex:M&&y?-1:F,ownerState:D},q,_,{children:[V||P,x.jsx(la,{className:k(b.label),ownerState:D,children:U}),N]}))});export{sa as C};

package/dist/assets/CircularProgress-BOLg_ZK_.js

@@ -0,0 +1,28 @@
+import{V as N,W as U,c as w,_ as z,b as o,s as g,d as E,e as n,f as I,ai as D,aj as _}from"./OdysseyThemeProvider-uYQ_l8PJ.js";import{r as W}from"./index-NdkWRN8K.js";import{j as v}from"./jsx-runtime-CnH95YSl.js";function F(r){return N("MuiCircularProgress",r)}U("MuiCircularProgress",["root","determinate","indeterminate","colorPrimary","colorSecondary","svg","circle","circleDeterminate","circleIndeterminate","circleDisableShrink"]);const K=["className","color","disableShrink","size","style","thickness","value","variant"];let l=r=>r,P,b,S,$;const t=44,V=_(P||(P=l`
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+`)),B=_(b||(b=l`
+  0% {
+    stroke-dasharray: 1px, 200px;
+    stroke-dashoffset: 0;
+  }
+
+  50% {
+    stroke-dasharray: 100px, 200px;
+    stroke-dashoffset: -15px;
+  }
+
+  100% {
+    stroke-dasharray: 100px, 200px;
+    stroke-dashoffset: -125px;
+  }
+`)),G=r=>{const{classes:e,variant:s,color:a,disableShrink:d}=r,u={root:["root",s,`color${n(a)}`],svg:["svg"],circle:["circle",`circle${n(s)}`,d&&"circleDisableShrink"]};return I(u,F,e)},L=g("span",{name:"MuiCircularProgress",slot:"Root",overridesResolver:(r,e)=>{const{ownerState:s}=r;return[e.root,e[s.variant],e[`color${n(s.color)}`]]}})(({ownerState:r,theme:e})=>o({display:"inline-block"},r.variant==="determinate"&&{transition:e.transitions.create("transform")},r.color!=="inherit"&&{color:(e.vars||e).palette[r.color].main}),({ownerState:r})=>r.variant==="indeterminate"&&D(S||(S=l`
+      animation: ${0} 1.4s linear infinite;
+    `),V)),Z=g("svg",{name:"MuiCircularProgress",slot:"Svg",overridesResolver:(r,e)=>e.svg})({display:"block"}),q=g("circle",{name:"MuiCircularProgress",slot:"Circle",overridesResolver:(r,e)=>{const{ownerState:s}=r;return[e.circle,e[`circle${n(s.variant)}`],s.disableShrink&&e.circleDisableShrink]}})(({ownerState:r,theme:e})=>o({stroke:"currentColor"},r.variant==="determinate"&&{transition:e.transitions.create("stroke-dashoffset")},r.variant==="indeterminate"&&{strokeDasharray:"80px, 200px",strokeDashoffset:0}),({ownerState:r})=>r.variant==="indeterminate"&&!r.disableShrink&&D($||($=l`
+      animation: ${0} 1.4s ease-in-out infinite;
+    `),B)),O=W.forwardRef(function(e,s){const a=w({props:e,name:"MuiCircularProgress"}),{className:d,color:u="primary",disableShrink:M=!1,size:m=40,style:R,thickness:i=3.6,value:f=0,variant:k="indeterminate"}=a,j=z(a,K),c=o({},a,{color:u,disableShrink:M,size:m,thickness:i,value:f,variant:k}),p=G(c),h={},x={},y={};if(k==="determinate"){const C=2*Math.PI*((t-i)/2);h.strokeDasharray=C.toFixed(3),y["aria-valuenow"]=Math.round(f),h.strokeDashoffset=`${((100-f)/100*C).toFixed(3)}px`,x.transform="rotate(-90deg)"}return v.jsx(L,o({className:E(p.root,d),style:o({width:m,height:m},x,R),ownerState:c,ref:s,role:"progressbar"},y,j,{children:v.jsx(Z,{className:p.svg,ownerState:c,viewBox:`${t/2} ${t/2} ${t} ${t}`,children:v.jsx(q,{className:p.circle,style:h,ownerState:c,cx:t,cy:t,r:(t-i)/2,fill:"none",strokeWidth:i})})}))});export{O as C};

package/dist/assets/CircularProgress-DxmJkz2B.js

@@ -0,0 +1 @@
+import{r as e}from"./index-NdkWRN8K.js";import{j as o}from"./jsx-runtime-CnH95YSl.js";import{C as t}from"./CircularProgress-BOLg_ZK_.js";const i=({ariaLabel:a,testId:s,value:r})=>o.jsx(t,{"aria-label":a,"data-se":s,value:r,variant:r?"determinate":"indeterminate"}),m=e.memo(i);m.displayName="CircularProgress";export{m as M};

package/dist/assets/CircularProgress.stories-BzOGzmX1.js

@@ -0,0 +1,44 @@
+import{w as m,e as d}from"./index-BJMTVygn.js";import{O as u}from"./OdysseyStorybookThemeDecorator-DsQ8XVOG.js";import{M as g}from"./CircularProgress-DxmJkz2B.js";import"./jsx-runtime-CnH95YSl.js";import"./index-NdkWRN8K.js";import"./_commonjsHelpers-gnU0ypJ3.js";import"./OdysseyThemeProvider-uYQ_l8PJ.js";import"./index-BJTM6NaI.js";import"./OdysseyProvider-YUKfsUrL.js";import"./CircularProgress-BOLg_ZK_.js";/*!
+ * Copyright (c) 2021-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */const C={component:g,decorators:[u],tags:["autodocs"],argTypes:{value:{control:{type:"number"}},ariaLabel:{control:{type:"text"}}}},e={parameters:{docs:{description:{story:"If the component `value` is undefined or `0`, the component will spin indefinitely."}}},args:{ariaLabel:"progress"},play:async({canvasElement:c,step:p})=>{await p("Circular Aria-Label",()=>{const l=m(c).getByLabelText("progress");d(l).toHaveAttribute("role","progressbar")})}},r={parameters:{docs:{description:{story:"If the component has a set `value`, it will show as a static circular progress bar with that value filled as a percentage."}}},args:{value:70,ariaLabel:"progress"}};var a,t,s;e.parameters={...e.parameters,docs:{...(a=e.parameters)==null?void 0:a.docs,source:{originalSource:`{
+  parameters: {
+    docs: {
+      description: {
+        story: "If the component \`value\` is undefined or \`0\`, the component will spin indefinitely."
+      }
+    }
+  },
+  args: {
+    ariaLabel: "progress"
+  },
+  play: async ({
+    canvasElement,
+    step
+  }) => {
+    await step("Circular Aria-Label", () => {
+      const canvas = within(canvasElement);
+      const circular = canvas.getByLabelText("progress");
+      expect(circular).toHaveAttribute("role", "progressbar");
+    });
+  }
+}`,...(s=(t=e.parameters)==null?void 0:t.docs)==null?void 0:s.source}}};var o,n,i;r.parameters={...r.parameters,docs:{...(o=r.parameters)==null?void 0:o.docs,source:{originalSource:`{
+  parameters: {
+    docs: {
+      description: {
+        story: "If the component has a set \`value\`, it will show as a static circular progress bar with that value filled as a percentage."
+      }
+    }
+  },
+  args: {
+    value: 70,
+    ariaLabel: "progress"
+  }
+}`,...(i=(n=r.parameters)==null?void 0:n.docs)==null?void 0:i.source}}};const D=["Indeterminate","Determinate"];export{r as Determinate,e as Indeterminate,D as __namedExportsOrder,C as default};

package/dist/assets/Clock-dOo7_xs2.js

@@ -0,0 +1 @@
+import{r}from"./index-NdkWRN8K.js";import{j as o}from"./jsx-runtime-CnH95YSl.js";import{S as n}from"./OdysseyThemeProvider-uYQ_l8PJ.js";const t=r.forwardRef((e,l)=>o.jsx(n,{fill:"none",ref:l,viewBox:"0 0 16 16",xmlns:"http://www.w3.org/2000/svg",...e,children:o.jsx(o.Fragment,{children:o.jsx("path",{clipRule:"evenodd",d:"M2 8a6 6 0 1 1 12 0A6 6 0 0 1 2 8ZM8 .667a7.333 7.333 0 1 0 0 14.666A7.333 7.333 0 0 0 8 .667ZM7.333 4v3.667a1 1 0 0 0 1 1H12V7.333H8.667V4H7.333Z",fill:"currentColor",fillRule:"evenodd"})})})),s=r.memo(t);s.displayName="ClockIcon";export{s as M};

package/dist/assets/Close-DWj_zrWe.js

@@ -0,0 +1 @@
+import"./index-NdkWRN8K.js";import{c as o}from"./createSvgIcon-SdTF6s8l.js";import{j as r}from"./jsx-runtime-CnH95YSl.js";const e=o(r.jsx("path",{d:"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"}),"Close");export{e as C};

package/dist/assets/Code Styling Guidelines-CFH47C47.js

@@ -0,0 +1,14 @@
+import{j as e}from"./jsx-runtime-CnH95YSl.js";import{useMDXComponents as s}from"./index-BeeV6X6A.js";import{M as r}from"./index-DiEiQB-f.js";import"./index-NdkWRN8K.js";import"./_commonjsHelpers-gnU0ypJ3.js";import"./iframe-B5wE2ay9.js";import"./index-BJTM6NaI.js";import"./index-B5xazMy1.js";import"./index-DieBXP3Z.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";function o(i){const n={code:"code",h1:"h1",h2:"h2",h3:"h3",p:"p",...s(),...i.components};return e.jsxs(e.Fragment,{children:[e.jsx(r,{}),`
+`,e.jsx(n.h1,{id:"code-styling-guidelines",children:"Code Styling Guidelines"}),`
+`,e.jsx(n.h2,{id:"prop-naming",children:"Prop Naming"}),`
+`,e.jsx(n.p,{children:"We define every prop explicitly, rather than extending the full array of MUI props, to ensure that Odyssey components only include the features we’ve explicitly defined."}),`
+`,e.jsx(n.p,{children:"We derive state from functionality whenever possible."}),`
+`,e.jsx(n.h3,{id:"callbacks",children:"Callbacks"}),`
+`,e.jsxs(n.p,{children:["All events have an ",e.jsx(n.code,{children:"on"})," prefix. Events are named as ",e.jsx(n.code,{children:"on[EVENT_NAME]"}),", with the event in present-tense (such as ",e.jsx(n.code,{children:"onClick"}),", ",e.jsx(n.code,{children:"onRemove"}),", etc)."]}),`
+`,e.jsxs(n.p,{children:["In MUI, the Chip component includes separate props for ",e.jsx(n.code,{children:"clickable"})," and ",e.jsx(n.code,{children:"onClick"}),". For Odyssey Tag, we’ve simplified this to only ",e.jsx(n.code,{children:"onClick"})," — if ",e.jsx(n.code,{children:"onClick"})," is defined, we know the tag is ",e.jsx(n.code,{children:"cliackble"}),". If it isn’t defined, we know it isn’t. No need for two separate props."]}),`
+`,e.jsx(n.h3,{id:"booleans",children:"Booleans"}),`
+`,e.jsxs(n.p,{children:["Booleans are named as ",e.jsx(n.code,{children:"isBoolean"})," or ",e.jsx(n.code,{children:"hasBoolean"}),", such as ",e.jsx(n.code,{children:"isDisabled"}),", ",e.jsx(n.code,{children:"isVisible"}),", or ",e.jsx(n.code,{children:"hasError"}),". This is different from MUI, which uses the simple boolean name (",e.jsx(n.code,{children:"disabled"})," or ",e.jsx(n.code,{children:"visible"}),")."]}),`
+`,e.jsx(n.h3,{id:"terminology-delete-versus-remove",children:"Terminology: Delete versus Remove"}),`
+`,e.jsx(n.p,{children:"We have deliberately different meanings for “Delete” and “Remove”."}),`
+`,e.jsx(n.p,{children:"We use Delete for an action that makes an object permanently inaccessible, such as deleting data from a database."}),`
+`,e.jsx(n.p,{children:"We use Remove for an action that removes a reference to an object, or for temporary removal, such as removing a tag from a list (assuming the tag is still available to be added to future lists)."})]})}function u(i={}){const{wrapper:n}={...s(),...i.components};return n?e.jsx(n,{...i,children:e.jsx(o,{...i})}):o(i)}export{u as default};

package/dist/assets/Collapse-Bf9rwi0n.js

@@ -0,0 +1 @@
+import{V as Z,W as tt,c as et,ak as nt,_ as it,b as o,s as T,d as ot,f as rt}from"./OdysseyThemeProvider-uYQ_l8PJ.js";import{r as y}from"./index-NdkWRN8K.js";import{T as st,u as at,g as P}from"./utils-uddq32f3.js";import{j as C}from"./jsx-runtime-CnH95YSl.js";import{a as lt,u as pt}from"./useIsFocusVisible-DH0qxT5e.js";function dt(n){return Z("MuiCollapse",n)}tt("MuiCollapse",["root","horizontal","vertical","entered","hidden","wrapper","wrapperInner"]);const ct=["addEndListener","children","className","collapsedSize","component","easing","in","onEnter","onEntered","onEntering","onExit","onExited","onExiting","orientation","style","timeout","TransitionComponent"],ut=n=>{const{orientation:e,classes:r}=n,d={root:["root",`${e}`],entered:["entered"],hidden:["hidden"],wrapper:["wrapper",`${e}`],wrapperInner:["wrapperInner",`${e}`]};return rt(d,dt,r)},ht=T("div",{name:"MuiCollapse",slot:"Root",overridesResolver:(n,e)=>{const{ownerState:r}=n;return[e.root,e[r.orientation],r.state==="entered"&&e.entered,r.state==="exited"&&!r.in&&r.collapsedSize==="0px"&&e.hidden]}})(({theme:n,ownerState:e})=>o({height:0,overflow:"hidden",transition:n.transitions.create("height")},e.orientation==="horizontal"&&{height:"auto",width:0,transition:n.transitions.create("width")},e.state==="entered"&&o({height:"auto",overflow:"visible"},e.orientation==="horizontal"&&{width:"auto"}),e.state==="exited"&&!e.in&&e.collapsedSize==="0px"&&{visibility:"hidden"})),mt=T("div",{name:"MuiCollapse",slot:"Wrapper",overridesResolver:(n,e)=>e.wrapper})(({ownerState:n})=>o({display:"flex",width:"100%"},n.orientation==="horizontal"&&{width:"auto",height:"100%"})),ft=T("div",{name:"MuiCollapse",slot:"WrapperInner",overridesResolver:(n,e)=>e.wrapperInner})(({ownerState:n})=>o({width:"100%"},n.orientation==="horizontal"&&{width:"auto",height:"100%"})),gt=y.forwardRef(function(e,r){const d=et({props:e,name:"MuiCollapse"}),{addEndListener:S,children:b,className:U,collapsedSize:f="0px",component:_,easing:D,in:$,onEnter:W,onEntered:j,onEntering:I,onExit:M,onExited:A,onExiting:F,orientation:H="vertical",style:z,timeout:a=nt.standard,TransitionComponent:k=st}=d,V=it(d,ct),g=o({},d,{orientation:H,collapsedSize:f}),c=ut(g),L=at(),q=lt(),l=y.useRef(null),v=y.useRef(),x=typeof f=="number"?`${f}px`:f,u=H==="horizontal",h=u?"width":"height",E=y.useRef(null),B=pt(r,E),p=t=>i=>{if(t){const s=E.current;i===void 0?t(s):t(s,i)}},R=()=>l.current?l.current[u?"clientWidth":"clientHeight"]:0,G=p((t,i)=>{l.current&&u&&(l.current.style.position="absolute"),t.style[h]=x,W&&W(t,i)}),J=p((t,i)=>{const s=R();l.current&&u&&(l.current.style.position="");const{duration:m,easing:w}=P({style:z,timeout:a,easing:D},{mode:"enter"});if(a==="auto"){const N=L.transitions.getAutoHeightDuration(s);t.style.transitionDuration=`${N}ms`,v.current=N}else t.style.transitionDuration=typeof m=="string"?m:`${m}ms`;t.style[h]=`${s}px`,t.style.transitionTimingFunction=w,I&&I(t,i)}),K=p((t,i)=>{t.style[h]="auto",j&&j(t,i)}),O=p(t=>{t.style[h]=`${R()}px`,M&&M(t)}),Q=p(A),X=p(t=>{const i=R(),{duration:s,easing:m}=P({style:z,timeout:a,easing:D},{mode:"exit"});if(a==="auto"){const w=L.transitions.getAutoHeightDuration(i);t.style.transitionDuration=`${w}ms`,v.current=w}else t.style.transitionDuration=typeof s=="string"?s:`${s}ms`;t.style[h]=x,t.style.transitionTimingFunction=m,F&&F(t)}),Y=t=>{a==="auto"&&q.start(v.current||0,t),S&&S(E.current,t)};return C.jsx(k,o({in:$,onEnter:G,onEntered:K,onEntering:J,onExit:O,onExited:Q,onExiting:X,addEndListener:Y,nodeRef:E,timeout:a==="auto"?null:a},V,{children:(t,i)=>C.jsx(ht,o({as:_,className:ot(c.root,U,{entered:c.entered,exited:!$&&x==="0px"&&c.hidden}[t]),style:o({[u?"minWidth":"minHeight"]:x},z),ref:B},i,{ownerState:o({},g,{state:t}),children:C.jsx(mt,{ownerState:o({},g,{state:t}),className:c.wrapper,ref:l,children:C.jsx(ft,{ownerState:o({},g,{state:t}),className:c.wrapperInner,children:b})})}))}))});gt.muiSupportAuto=!0;export{gt as C};

package/dist/assets/Color-YHDXOIA2-XSMM8EzF.js

@@ -0,0 +1 @@
+import{d as ce,G as Z,g as he,e as fe,Z as de,f as ge,_ as be,h as q}from"./index-DiEiQB-f.js";import{r as p,e as m}from"./index-NdkWRN8K.js";import{v as M}from"./index-BJTM6NaI.js";import"./iframe-B5wE2ay9.js";import"./jsx-runtime-CnH95YSl.js";import"./index-B5xazMy1.js";import"./_commonjsHelpers-gnU0ypJ3.js";import"./index-DieBXP3Z.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";var me=q({"../../node_modules/color-name/index.js"(n,l){l.exports={aliceblue:[240,248,255],antiquewhite:[250,235,215],aqua:[0,255,255],aquamarine:[127,255,212],azure:[240,255,255],beige:[245,245,220],bisque:[255,228,196],black:[0,0,0],blanchedalmond:[255,235,205],blue:[0,0,255],blueviolet:[138,43,226],brown:[165,42,42],burlywood:[222,184,135],cadetblue:[95,158,160],chartreuse:[127,255,0],chocolate:[210,105,30],coral:[255,127,80],cornflowerblue:[100,149,237],cornsilk:[255,248,220],crimson:[220,20,60],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgoldenrod:[184,134,11],darkgray:[169,169,169],darkgreen:[0,100,0],darkgrey:[169,169,169],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkseagreen:[143,188,143],darkslateblue:[72,61,139],darkslategray:[47,79,79],darkslategrey:[47,79,79],darkturquoise:[0,206,209],darkviolet:[148,0,211],deeppink:[255,20,147],deepskyblue:[0,191,255],dimgray:[105,105,105],dimgrey:[105,105,105],dodgerblue:[30,144,255],firebrick:[178,34,34],floralwhite:[255,250,240],forestgreen:[34,139,34],fuchsia:[255,0,255],gainsboro:[220,220,220],ghostwhite:[248,248,255],gold:[255,215,0],goldenrod:[218,165,32],gray:[128,128,128],green:[0,128,0],greenyellow:[173,255,47],grey:[128,128,128],honeydew:[240,255,240],hotpink:[255,105,180],indianred:[205,92,92],indigo:[75,0,130],ivory:[255,255,240],khaki:[240,230,140],lavender:[230,230,250],lavenderblush:[255,240,245],lawngreen:[124,252,0],lemonchiffon:[255,250,205],lightblue:[173,216,230],lightcoral:[240,128,128],lightcyan:[224,255,255],lightgoldenrodyellow:[250,250,210],lightgray:[211,211,211],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightsalmon:[255,160,122],lightseagreen:[32,178,170],lightskyblue:[135,206,250],lightslategray:[119,136,153],lightslategrey:[119,136,153],lightsteelblue:[176,196,222],lightyellow:[255,255,224],lime:[0,255,0],limegreen:[50,205,50],linen:[250,240,230],magenta:[255,0,255],maroon:[128,0,0],mediumaquamarine:[102,205,170],mediumblue:[0,0,205],mediumorchid:[186,85,211],mediumpurple:[147,112,219],mediumseagreen:[60,179,113],mediumslateblue:[123,104,238],mediumspringgreen:[0,250,154],mediumturquoise:[72,209,204],mediumvioletred:[199,21,133],midnightblue:[25,25,112],mintcream:[245,255,250],mistyrose:[255,228,225],moccasin:[255,228,181],navajowhite:[255,222,173],navy:[0,0,128],oldlace:[253,245,230],olive:[128,128,0],olivedrab:[107,142,35],orange:[255,165,0],orangered:[255,69,0],orchid:[218,112,214],palegoldenrod:[238,232,170],palegreen:[152,251,152],paleturquoise:[175,238,238],palevioletred:[219,112,147],papayawhip:[255,239,213],peachpuff:[255,218,185],peru:[205,133,63],pink:[255,192,203],plum:[221,160,221],powderblue:[176,224,230],purple:[128,0,128],rebeccapurple:[102,51,153],red:[255,0,0],rosybrown:[188,143,143],royalblue:[65,105,225],saddlebrown:[139,69,19],salmon:[250,128,114],sandybrown:[244,164,96],seagreen:[46,139,87],seashell:[255,245,238],sienna:[160,82,45],silver:[192,192,192],skyblue:[135,206,235],slateblue:[106,90,205],slategray:[112,128,144],slategrey:[112,128,144],snow:[255,250,250],springgreen:[0,255,127],steelblue:[70,130,180],tan:[210,180,140],teal:[0,128,128],thistle:[216,191,216],tomato:[255,99,71],turquoise:[64,224,208],violet:[238,130,238],wheat:[245,222,179],white:[255,255,255],whitesmoke:[245,245,245],yellow:[255,255,0],yellowgreen:[154,205,50]}}}),J=q({"../../node_modules/color-convert/conversions.js"(n,l){var c=me(),h={};for(let e of Object.keys(c))h[c[e]]=e;var u={rgb:{channels:3,labels:"rgb"},hsl:{channels:3,labels:"hsl"},hsv:{channels:3,labels:"hsv"},hwb:{channels:3,labels:"hwb"},cmyk:{channels:4,labels:"cmyk"},xyz:{channels:3,labels:"xyz"},lab:{channels:3,labels:"lab"},lch:{channels:3,labels:"lch"},hex:{channels:1,labels:["hex"]},keyword:{channels:1,labels:["keyword"]},ansi16:{channels:1,labels:["ansi16"]},ansi256:{channels:1,labels:["ansi256"]},hcg:{channels:3,labels:["h","c","g"]},apple:{channels:3,labels:["r16","g16","b16"]},gray:{channels:1,labels:["gray"]}};l.exports=u;for(let e of Object.keys(u)){if(!("channels"in u[e]))throw new Error("missing channels property: "+e);if(!("labels"in u[e]))throw new Error("missing channel labels property: "+e);if(u[e].labels.length!==u[e].channels)throw new Error("channel and label counts mismatch: "+e);let{channels:t,labels:r}=u[e];delete u[e].channels,delete u[e].labels,Object.defineProperty(u[e],"channels",{value:t}),Object.defineProperty(u[e],"labels",{value:r})}u.rgb.hsl=function(e){let t=e[0]/255,r=e[1]/255,a=e[2]/255,o=Math.min(t,r,a),i=Math.max(t,r,a),s=i-o,f,g;i===o?f=0:t===i?f=(r-a)/s:r===i?f=2+(a-t)/s:a===i&&(f=4+(t-r)/s),f=Math.min(f*60,360),f<0&&(f+=360);let b=(o+i)/2;return i===o?g=0:b<=.5?g=s/(i+o):g=s/(2-i-o),[f,g*100,b*100]},u.rgb.hsv=function(e){let t,r,a,o,i,s=e[0]/255,f=e[1]/255,g=e[2]/255,b=Math.max(s,f,g),y=b-Math.min(s,f,g),v=function(w){return(b-w)/6/y+1/2};return y===0?(o=0,i=0):(i=y/b,t=v(s),r=v(f),a=v(g),s===b?o=a-r:f===b?o=1/3+t-a:g===b&&(o=2/3+r-t),o<0?o+=1:o>1&&(o-=1)),[o*360,i*100,b*100]},u.rgb.hwb=function(e){let t=e[0],r=e[1],a=e[2],o=u.rgb.hsl(e)[0],i=1/255*Math.min(t,Math.min(r,a));return a=1-1/255*Math.max(t,Math.max(r,a)),[o,i*100,a*100]},u.rgb.cmyk=function(e){let t=e[0]/255,r=e[1]/255,a=e[2]/255,o=Math.min(1-t,1-r,1-a),i=(1-t-o)/(1-o)||0,s=(1-r-o)/(1-o)||0,f=(1-a-o)/(1-o)||0;return[i*100,s*100,f*100,o*100]};function d(e,t){return(e[0]-t[0])**2+(e[1]-t[1])**2+(e[2]-t[2])**2}u.rgb.keyword=function(e){let t=h[e];if(t)return t;let r=1/0,a;for(let o of Object.keys(c)){let i=c[o],s=d(e,i);s<r&&(r=s,a=o)}return a},u.keyword.rgb=function(e){return c[e]},u.rgb.xyz=function(e){let t=e[0]/255,r=e[1]/255,a=e[2]/255;t=t>.04045?((t+.055)/1.055)**2.4:t/12.92,r=r>.04045?((r+.055)/1.055)**2.4:r/12.92,a=a>.04045?((a+.055)/1.055)**2.4:a/12.92;let o=t*.4124+r*.3576+a*.1805,i=t*.2126+r*.7152+a*.0722,s=t*.0193+r*.1192+a*.9505;return[o*100,i*100,s*100]},u.rgb.lab=function(e){let t=u.rgb.xyz(e),r=t[0],a=t[1],o=t[2];r/=95.047,a/=100,o/=108.883,r=r>.008856?r**(1/3):7.787*r+16/116,a=a>.008856?a**(1/3):7.787*a+16/116,o=o>.008856?o**(1/3):7.787*o+16/116;let i=116*a-16,s=500*(r-a),f=200*(a-o);return[i,s,f]},u.hsl.rgb=function(e){let t=e[0]/360,r=e[1]/100,a=e[2]/100,o,i,s;if(r===0)return s=a*255,[s,s,s];a<.5?o=a*(1+r):o=a+r-a*r;let f=2*a-o,g=[0,0,0];for(let b=0;b<3;b++)i=t+1/3*-(b-1),i<0&&i++,i>1&&i--,6*i<1?s=f+(o-f)*6*i:2*i<1?s=o:3*i<2?s=f+(o-f)*(2/3-i)*6:s=f,g[b]=s*255;return g},u.hsl.hsv=function(e){let t=e[0],r=e[1]/100,a=e[2]/100,o=r,i=Math.max(a,.01);a*=2,r*=a<=1?a:2-a,o*=i<=1?i:2-i;let s=(a+r)/2,f=a===0?2*o/(i+o):2*r/(a+r);return[t,f*100,s*100]},u.hsv.rgb=function(e){let t=e[0]/60,r=e[1]/100,a=e[2]/100,o=Math.floor(t)%6,i=t-Math.floor(t),s=255*a*(1-r),f=255*a*(1-r*i),g=255*a*(1-r*(1-i));switch(a*=255,o){case 0:return[a,g,s];case 1:return[f,a,s];case 2:return[s,a,g];case 3:return[s,f,a];case 4:return[g,s,a];case 5:return[a,s,f]}},u.hsv.hsl=function(e){let t=e[0],r=e[1]/100,a=e[2]/100,o=Math.max(a,.01),i,s;s=(2-r)*a;let f=(2-r)*o;return i=r*o,i/=f<=1?f:2-f,i=i||0,s/=2,[t,i*100,s*100]},u.hwb.rgb=function(e){let t=e[0]/360,r=e[1]/100,a=e[2]/100,o=r+a,i;o>1&&(r/=o,a/=o);let s=Math.floor(6*t),f=1-a;i=6*t-s,(s&1)!==0&&(i=1-i);let g=r+i*(f-r),b,y,v;switch(s){default:case 6:case 0:b=f,y=g,v=r;break;case 1:b=g,y=f,v=r;break;case 2:b=r,y=f,v=g;break;case 3:b=r,y=g,v=f;break;case 4:b=g,y=r,v=f;break;case 5:b=f,y=r,v=g;break}return[b*255,y*255,v*255]},u.cmyk.rgb=function(e){let t=e[0]/100,r=e[1]/100,a=e[2]/100,o=e[3]/100,i=1-Math.min(1,t*(1-o)+o),s=1-Math.min(1,r*(1-o)+o),f=1-Math.min(1,a*(1-o)+o);return[i*255,s*255,f*255]},u.xyz.rgb=function(e){let t=e[0]/100,r=e[1]/100,a=e[2]/100,o,i,s;return o=t*3.2406+r*-1.5372+a*-.4986,i=t*-.9689+r*1.8758+a*.0415,s=t*.0557+r*-.204+a*1.057,o=o>.0031308?1.055*o**(1/2.4)-.055:o*12.92,i=i>.0031308?1.055*i**(1/2.4)-.055:i*12.92,s=s>.0031308?1.055*s**(1/2.4)-.055:s*12.92,o=Math.min(Math.max(0,o),1),i=Math.min(Math.max(0,i),1),s=Math.min(Math.max(0,s),1),[o*255,i*255,s*255]},u.xyz.lab=function(e){let t=e[0],r=e[1],a=e[2];t/=95.047,r/=100,a/=108.883,t=t>.008856?t**(1/3):7.787*t+16/116,r=r>.008856?r**(1/3):7.787*r+16/116,a=a>.008856?a**(1/3):7.787*a+16/116;let o=116*r-16,i=500*(t-r),s=200*(r-a);return[o,i,s]},u.lab.xyz=function(e){let t=e[0],r=e[1],a=e[2],o,i,s;i=(t+16)/116,o=r/500+i,s=i-a/200;let f=i**3,g=o**3,b=s**3;return i=f>.008856?f:(i-16/116)/7.787,o=g>.008856?g:(o-16/116)/7.787,s=b>.008856?b:(s-16/116)/7.787,o*=95.047,i*=100,s*=108.883,[o,i,s]},u.lab.lch=function(e){let t=e[0],r=e[1],a=e[2],o;o=Math.atan2(a,r)*360/2/Math.PI,o<0&&(o+=360);let i=Math.sqrt(r*r+a*a);return[t,i,o]},u.lch.lab=function(e){let t=e[0],r=e[1],a=e[2]/360*2*Math.PI,o=r*Math.cos(a),i=r*Math.sin(a);return[t,o,i]},u.rgb.ansi16=function(e,t=null){let[r,a,o]=e,i=t===null?u.rgb.hsv(e)[2]:t;if(i=Math.round(i/50),i===0)return 30;let s=30+(Math.round(o/255)<<2|Math.round(a/255)<<1|Math.round(r/255));return i===2&&(s+=60),s},u.hsv.ansi16=function(e){return u.rgb.ansi16(u.hsv.rgb(e),e[2])},u.rgb.ansi256=function(e){let t=e[0],r=e[1],a=e[2];return t===r&&r===a?t<8?16:t>248?231:Math.round((t-8)/247*24)+232:16+36*Math.round(t/255*5)+6*Math.round(r/255*5)+Math.round(a/255*5)},u.ansi16.rgb=function(e){let t=e%10;if(t===0||t===7)return e>50&&(t+=3.5),t=t/10.5*255,[t,t,t];let r=(~~(e>50)+1)*.5,a=(t&1)*r*255,o=(t>>1&1)*r*255,i=(t>>2&1)*r*255;return[a,o,i]},u.ansi256.rgb=function(e){if(e>=232){let i=(e-232)*10+8;return[i,i,i]}e-=16;let t,r=Math.floor(e/36)/5*255,a=Math.floor((t=e%36)/6)/5*255,o=t%6/5*255;return[r,a,o]},u.rgb.hex=function(e){let t=(((Math.round(e[0])&255)<<16)+((Math.round(e[1])&255)<<8)+(Math.round(e[2])&255)).toString(16).toUpperCase();return"000000".substring(t.length)+t},u.hex.rgb=function(e){let t=e.toString(16).match(/[a-f0-9]{6}|[a-f0-9]{3}/i);if(!t)return[0,0,0];let r=t[0];t[0].length===3&&(r=r.split("").map(f=>f+f).join(""));let a=parseInt(r,16),o=a>>16&255,i=a>>8&255,s=a&255;return[o,i,s]},u.rgb.hcg=function(e){let t=e[0]/255,r=e[1]/255,a=e[2]/255,o=Math.max(Math.max(t,r),a),i=Math.min(Math.min(t,r),a),s=o-i,f,g;return s<1?f=i/(1-s):f=0,s<=0?g=0:o===t?g=(r-a)/s%6:o===r?g=2+(a-t)/s:g=4+(t-r)/s,g/=6,g%=1,[g*360,s*100,f*100]},u.hsl.hcg=function(e){let t=e[1]/100,r=e[2]/100,a=r<.5?2*t*r:2*t*(1-r),o=0;return a<1&&(o=(r-.5*a)/(1-a)),[e[0],a*100,o*100]},u.hsv.hcg=function(e){let t=e[1]/100,r=e[2]/100,a=t*r,o=0;return a<1&&(o=(r-a)/(1-a)),[e[0],a*100,o*100]},u.hcg.rgb=function(e){let t=e[0]/360,r=e[1]/100,a=e[2]/100;if(r===0)return[a*255,a*255,a*255];let o=[0,0,0],i=t%1*6,s=i%1,f=1-s,g=0;switch(Math.floor(i)){case 0:o[0]=1,o[1]=s,o[2]=0;break;case 1:o[0]=f,o[1]=1,o[2]=0;break;case 2:o[0]=0,o[1]=1,o[2]=s;break;case 3:o[0]=0,o[1]=f,o[2]=1;break;case 4:o[0]=s,o[1]=0,o[2]=1;break;default:o[0]=1,o[1]=0,o[2]=f}return g=(1-r)*a,[(r*o[0]+g)*255,(r*o[1]+g)*255,(r*o[2]+g)*255]},u.hcg.hsv=function(e){let t=e[1]/100,r=e[2]/100,a=t+r*(1-t),o=0;return a>0&&(o=t/a),[e[0],o*100,a*100]},u.hcg.hsl=function(e){let t=e[1]/100,r=e[2]/100*(1-t)+.5*t,a=0;return r>0&&r<.5?a=t/(2*r):r>=.5&&r<1&&(a=t/(2*(1-r))),[e[0],a*100,r*100]},u.hcg.hwb=function(e){let t=e[1]/100,r=e[2]/100,a=t+r*(1-t);return[e[0],(a-t)*100,(1-a)*100]},u.hwb.hcg=function(e){let t=e[1]/100,r=1-e[2]/100,a=r-t,o=0;return a<1&&(o=(r-a)/(1-a)),[e[0],a*100,o*100]},u.apple.rgb=function(e){return[e[0]/65535*255,e[1]/65535*255,e[2]/65535*255]},u.rgb.apple=function(e){return[e[0]/255*65535,e[1]/255*65535,e[2]/255*65535]},u.gray.rgb=function(e){return[e[0]/100*255,e[0]/100*255,e[0]/100*255]},u.gray.hsl=function(e){return[0,0,e[0]]},u.gray.hsv=u.gray.hsl,u.gray.hwb=function(e){return[0,100,e[0]]},u.gray.cmyk=function(e){return[0,0,0,e[0]]},u.gray.lab=function(e){return[e[0],0,0]},u.gray.hex=function(e){let t=Math.round(e[0]/100*255)&255,r=((t<<16)+(t<<8)+t).toString(16).toUpperCase();return"000000".substring(r.length)+r},u.rgb.gray=function(e){return[(e[0]+e[1]+e[2])/3/255*100]}}}),ve=q({"../../node_modules/color-convert/route.js"(n,l){var c=J();function h(){let t={},r=Object.keys(c);for(let a=r.length,o=0;o<a;o++)t[r[o]]={distance:-1,parent:null};return t}function u(t){let r=h(),a=[t];for(r[t].distance=0;a.length;){let o=a.pop(),i=Object.keys(c[o]);for(let s=i.length,f=0;f<s;f++){let g=i[f],b=r[g];b.distance===-1&&(b.distance=r[o].distance+1,b.parent=o,a.unshift(g))}}return r}function d(t,r){return function(a){return r(t(a))}}function e(t,r){let a=[r[t].parent,t],o=c[r[t].parent][t],i=r[t].parent;for(;r[i].parent;)a.unshift(r[i].parent),o=d(c[r[i].parent][i],o),i=r[i].parent;return o.conversion=a,o}l.exports=function(t){let r=u(t),a={},o=Object.keys(r);for(let i=o.length,s=0;s<i;s++){let f=o[s];r[f].parent!==null&&(a[f]=e(f,r))}return a}}}),pe=q({"../../node_modules/color-convert/index.js"(n,l){var c=J(),h=ve(),u={},d=Object.keys(c);function e(r){let a=function(...o){let i=o[0];return i==null?i:(i.length>1&&(o=i),r(o))};return"conversion"in r&&(a.conversion=r.conversion),a}function t(r){let a=function(...o){let i=o[0];if(i==null)return i;i.length>1&&(o=i);let s=r(o);if(typeof s=="object")for(let f=s.length,g=0;g<f;g++)s[g]=Math.round(s[g]);return s};return"conversion"in r&&(a.conversion=r.conversion),a}d.forEach(r=>{u[r]={},Object.defineProperty(u[r],"channels",{value:c[r].channels}),Object.defineProperty(u[r],"labels",{value:c[r].labels});let a=h(r);Object.keys(a).forEach(o=>{let i=a[o];u[r][o]=t(i),u[r][o].raw=e(i)})}),l.exports=u}}),_=be(pe());function C(){return(C=Object.assign||function(n){for(var l=1;l<arguments.length;l++){var c=arguments[l];for(var h in c)Object.prototype.hasOwnProperty.call(c,h)&&(n[h]=c[h])}return n}).apply(this,arguments)}function D(n,l){if(n==null)return{};var c,h,u={},d=Object.keys(n);for(h=0;h<d.length;h++)l.indexOf(c=d[h])>=0||(u[c]=n[c]);return u}function L(n){var l=p.useRef(n),c=p.useRef(function(h){l.current&&l.current(h)});return l.current=n,c.current}var O=function(n,l,c){return l===void 0&&(l=0),c===void 0&&(c=1),n>c?c:n<l?l:n},S=function(n){return"touches"in n},B=function(n){return n&&n.ownerDocument.defaultView||self},T=function(n,l,c){var h=n.getBoundingClientRect(),u=S(l)?function(d,e){for(var t=0;t<d.length;t++)if(d[t].identifier===e)return d[t];return d[0]}(l.touches,c):l;return{left:O((u.pageX-(h.left+B(n).pageXOffset))/h.width),top:O((u.pageY-(h.top+B(n).pageYOffset))/h.height)}},W=function(n){!S(n)&&n.preventDefault()},V=m.memo(function(n){var l=n.onMove,c=n.onKey,h=D(n,["onMove","onKey"]),u=p.useRef(null),d=L(l),e=L(c),t=p.useRef(null),r=p.useRef(!1),a=p.useMemo(function(){var f=function(y){W(y),(S(y)?y.touches.length>0:y.buttons>0)&&u.current?d(T(u.current,y,t.current)):b(!1)},g=function(){return b(!1)};function b(y){var v=r.current,w=B(u.current),E=y?w.addEventListener:w.removeEventListener;E(v?"touchmove":"mousemove",f),E(v?"touchend":"mouseup",g)}return[function(y){var v=y.nativeEvent,w=u.current;if(w&&(W(v),!function(k,P){return P&&!S(k)}(v,r.current)&&w)){if(S(v)){r.current=!0;var E=v.changedTouches||[];E.length&&(t.current=E[0].identifier)}w.focus(),d(T(w,v,t.current)),b(!0)}},function(y){var v=y.which||y.keyCode;v<37||v>40||(y.preventDefault(),e({left:v===39?.05:v===37?-.05:0,top:v===40?.05:v===38?-.05:0}))},b]},[e,d]),o=a[0],i=a[1],s=a[2];return p.useEffect(function(){return s},[s]),m.createElement("div",C({},h,{onTouchStart:o,onMouseDown:o,className:"react-colorful__interactive",ref:u,onKeyDown:i,tabIndex:0,role:"slider"}))}),N=function(n){return n.filter(Boolean).join(" ")},F=function(n){var l=n.color,c=n.left,h=n.top,u=h===void 0?.5:h,d=N(["react-colorful__pointer",n.className]);return m.createElement("div",{className:d,style:{top:100*u+"%",left:100*c+"%"}},m.createElement("div",{className:"react-colorful__pointer-fill",style:{backgroundColor:l}}))},x=function(n,l,c){return l===void 0&&(l=0),c===void 0&&(c=Math.pow(10,l)),Math.round(c*n)/c},ye={grad:.9,turn:360,rad:360/(2*Math.PI)},xe=function(n){return re(X(n))},X=function(n){return n[0]==="#"&&(n=n.substring(1)),n.length<6?{r:parseInt(n[0]+n[0],16),g:parseInt(n[1]+n[1],16),b:parseInt(n[2]+n[2],16),a:n.length===4?x(parseInt(n[3]+n[3],16)/255,2):1}:{r:parseInt(n.substring(0,2),16),g:parseInt(n.substring(2,4),16),b:parseInt(n.substring(4,6),16),a:n.length===8?x(parseInt(n.substring(6,8),16)/255,2):1}},we=function(n,l){return l===void 0&&(l="deg"),Number(n)*(ye[l]||1)},ke=function(n){var l=/hsla?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(n);return l?_e({h:we(l[1],l[2]),s:Number(l[3]),l:Number(l[4]),a:l[5]===void 0?1:Number(l[5])/(l[6]?100:1)}):{h:0,s:0,v:0,a:1}},_e=function(n){var l=n.s,c=n.l;return{h:n.h,s:(l*=(c<50?c:100-c)/100)>0?2*l/(c+l)*100:0,v:c+l,a:n.a}},Ee=function(n){return Ce(ee(n))},Q=function(n){var l=n.s,c=n.v,h=n.a,u=(200-l)*c/100;return{h:x(n.h),s:x(u>0&&u<200?l*c/100/(u<=100?u:200-u)*100:0),l:x(u/2),a:x(h,2)}},G=function(n){var l=Q(n);return"hsl("+l.h+", "+l.s+"%, "+l.l+"%)"},H=function(n){var l=Q(n);return"hsla("+l.h+", "+l.s+"%, "+l.l+"%, "+l.a+")"},ee=function(n){var l=n.h,c=n.s,h=n.v,u=n.a;l=l/360*6,c/=100,h/=100;var d=Math.floor(l),e=h*(1-c),t=h*(1-(l-d)*c),r=h*(1-(1-l+d)*c),a=d%6;return{r:x(255*[h,t,e,e,r,h][a]),g:x(255*[r,h,h,t,e,e][a]),b:x(255*[e,e,r,h,h,t][a]),a:x(u,2)}},Me=function(n){var l=/rgba?\(?\s*(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(n);return l?re({r:Number(l[1])/(l[2]?100/255:1),g:Number(l[3])/(l[4]?100/255:1),b:Number(l[5])/(l[6]?100/255:1),a:l[7]===void 0?1:Number(l[7])/(l[8]?100:1)}):{h:0,s:0,v:0,a:1}},j=function(n){var l=n.toString(16);return l.length<2?"0"+l:l},Ce=function(n){var l=n.r,c=n.g,h=n.b,u=n.a,d=u<1?j(x(255*u)):"";return"#"+j(l)+j(c)+j(h)+d},re=function(n){var l=n.r,c=n.g,h=n.b,u=n.a,d=Math.max(l,c,h),e=d-Math.min(l,c,h),t=e?d===l?(c-h)/e:d===c?2+(h-l)/e:4+(l-c)/e:0;return{h:x(60*(t<0?t+6:t)),s:x(d?e/d*100:0),v:x(d/255*100),a:u}},te=m.memo(function(n){var l=n.hue,c=n.onChange,h=N(["react-colorful__hue",n.className]);return m.createElement("div",{className:h},m.createElement(V,{onMove:function(u){c({h:360*u.left})},onKey:function(u){c({h:O(l+360*u.left,0,360)})},"aria-label":"Hue","aria-valuenow":x(l),"aria-valuemax":"360","aria-valuemin":"0"},m.createElement(F,{className:"react-colorful__hue-pointer",left:l/360,color:G({h:l,s:100,v:100,a:1})})))}),ne=m.memo(function(n){var l=n.hsva,c=n.onChange,h={backgroundColor:G({h:l.h,s:100,v:100,a:1})};return m.createElement("div",{className:"react-colorful__saturation",style:h},m.createElement(V,{onMove:function(u){c({s:100*u.left,v:100-100*u.top})},onKey:function(u){c({s:O(l.s+100*u.left,0,100),v:O(l.v-100*u.top,0,100)})},"aria-label":"Color","aria-valuetext":"Saturation "+x(l.s)+"%, Brightness "+x(l.v)+"%"},m.createElement(F,{className:"react-colorful__saturation-pointer",top:1-l.v/100,left:l.s/100,color:G(l)})))}),ae=function(n,l){if(n===l)return!0;for(var c in n)if(n[c]!==l[c])return!1;return!0},oe=function(n,l){return n.replace(/\s/g,"")===l.replace(/\s/g,"")},$e=function(n,l){return n.toLowerCase()===l.toLowerCase()||ae(X(n),X(l))};function le(n,l,c){var h=L(c),u=p.useState(function(){return n.toHsva(l)}),d=u[0],e=u[1],t=p.useRef({color:l,hsva:d});p.useEffect(function(){if(!n.equal(l,t.current.color)){var a=n.toHsva(l);t.current={hsva:a,color:l},e(a)}},[l,n]),p.useEffect(function(){var a;ae(d,t.current.hsva)||n.equal(a=n.fromHsva(d),t.current.color)||(t.current={hsva:d,color:a},h(a))},[d,n,h]);var r=p.useCallback(function(a){e(function(o){return Object.assign({},o,a)})},[]);return[d,r]}var Oe=typeof window<"u"?p.useLayoutEffect:p.useEffect,Se=function(){return typeof __webpack_nonce__<"u"?__webpack_nonce__:void 0},A=new Map,ie=function(n){Oe(function(){var l=n.current?n.current.ownerDocument:document;if(l!==void 0&&!A.has(l)){var c=l.createElement("style");c.innerHTML=`.react-colorful{position:relative;display:flex;flex-direction:column;width:200px;height:200px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.react-colorful__saturation{position:relative;flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.react-colorful__alpha-gradient,.react-colorful__pointer-fill{content:"";position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;border-radius:inherit}.react-colorful__alpha-gradient,.react-colorful__saturation{box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.react-colorful__alpha,.react-colorful__hue{position:relative;height:24px}.react-colorful__hue{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.react-colorful__last-control{border-radius:0 0 8px 8px}.react-colorful__interactive{position:absolute;left:0;top:0;right:0;bottom:0;border-radius:inherit;outline:none;touch-action:none}.react-colorful__pointer{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}.react-colorful__interactive:focus .react-colorful__pointer{transform:translate(-50%,-50%) scale(1.1)}.react-colorful__alpha,.react-colorful__alpha-pointer{background-color:#fff;background-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>')}.react-colorful__saturation-pointer{z-index:3}.react-colorful__hue-pointer{z-index:2}`,A.set(l,c);var h=Se();h&&c.setAttribute("nonce",h),l.head.appendChild(c)}},[])},Ne=function(n){var l=n.className,c=n.colorModel,h=n.color,u=h===void 0?c.defaultColor:h,d=n.onChange,e=D(n,["className","colorModel","color","onChange"]),t=p.useRef(null);ie(t);var r=le(c,u,d),a=r[0],o=r[1],i=N(["react-colorful",l]);return m.createElement("div",C({},e,{ref:t,className:i}),m.createElement(ne,{hsva:a,onChange:o}),m.createElement(te,{hue:a.h,onChange:o,className:"react-colorful__last-control"}))},je={defaultColor:"000",toHsva:xe,fromHsva:function(n){return Ee({h:n.h,s:n.s,v:n.v,a:1})},equal:$e},Re=function(n){return m.createElement(Ne,C({},n,{colorModel:je}))},ze=function(n){var l=n.className,c=n.hsva,h=n.onChange,u={backgroundImage:"linear-gradient(90deg, "+H(Object.assign({},c,{a:0}))+", "+H(Object.assign({},c,{a:1}))+")"},d=N(["react-colorful__alpha",l]),e=x(100*c.a);return m.createElement("div",{className:d},m.createElement("div",{className:"react-colorful__alpha-gradient",style:u}),m.createElement(V,{onMove:function(t){h({a:t.left})},onKey:function(t){h({a:O(c.a+t.left)})},"aria-label":"Alpha","aria-valuetext":e+"%","aria-valuenow":e,"aria-valuemin":"0","aria-valuemax":"100"},m.createElement(F,{className:"react-colorful__alpha-pointer",left:c.a,color:H(c)})))},ue=function(n){var l=n.className,c=n.colorModel,h=n.color,u=h===void 0?c.defaultColor:h,d=n.onChange,e=D(n,["className","colorModel","color","onChange"]),t=p.useRef(null);ie(t);var r=le(c,u,d),a=r[0],o=r[1],i=N(["react-colorful",l]);return m.createElement("div",C({},e,{ref:t,className:i}),m.createElement(ne,{hsva:a,onChange:o}),m.createElement(te,{hue:a.h,onChange:o}),m.createElement(ze,{hsva:a,onChange:o,className:"react-colorful__last-control"}))},He={defaultColor:"hsla(0, 0%, 0%, 1)",toHsva:ke,fromHsva:H,equal:oe},Ie=function(n){return m.createElement(ue,C({},n,{colorModel:He}))},qe={defaultColor:"rgba(0, 0, 0, 1)",toHsva:Me,fromHsva:function(n){var l=ee(n);return"rgba("+l.r+", "+l.g+", "+l.b+", "+l.a+")"},equal:oe},Pe=function(n){return m.createElement(ue,C({},n,{colorModel:qe}))},Le=M.div({position:"relative",maxWidth:250,'&[aria-readonly="true"]':{opacity:.5}}),Be=M(Z)({position:"absolute",zIndex:1,top:4,left:4,"[aria-readonly=true] &":{cursor:"not-allowed"}}),Xe=M.div({width:200,margin:5,".react-colorful__saturation":{borderRadius:"4px 4px 0 0"},".react-colorful__hue":{boxShadow:"inset 0 0 0 1px rgb(0 0 0 / 5%)"},".react-colorful__last-control":{borderRadius:"0 0 4px 4px"}}),Ge=M(fe)(({theme:n})=>({fontFamily:n.typography.fonts.base})),Ke=M.div({display:"grid",gridTemplateColumns:"repeat(9, 16px)",gap:6,padding:3,marginTop:5,width:200}),De=M.div(({theme:n,active:l})=>({width:16,height:16,boxShadow:l?`${n.appBorderColor} 0 0 0 1px inset, ${n.textMutedColor}50 0 0 0 4px`:`${n.appBorderColor} 0 0 0 1px inset`,borderRadius:n.appBorderRadius})),Ve=`url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>')`,U=({value:n,style:l,...c})=>{let h=`linear-gradient(${n}, ${n}), ${Ve}, linear-gradient(#fff, #fff)`;return m.createElement(De,{...c,style:{...l,backgroundImage:h}})},Fe=M(de.Input)(({theme:n,readOnly:l})=>({width:"100%",paddingLeft:30,paddingRight:30,boxSizing:"border-box",fontFamily:n.typography.fonts.base})),Te=M(ge)(({theme:n})=>({position:"absolute",zIndex:1,top:6,right:7,width:20,height:20,padding:4,boxSizing:"border-box",cursor:"pointer",color:n.input.color})),se=(n=>(n.RGB="rgb",n.HSL="hsl",n.HEX="hex",n))(se||{}),R=Object.values(se),We=/\(([0-9]+),\s*([0-9]+)%?,\s*([0-9]+)%?,?\s*([0-9.]+)?\)/,Ae=/^\s*rgba?\(([0-9]+),\s*([0-9]+),\s*([0-9]+),?\s*([0-9.]+)?\)\s*$/i,Ue=/^\s*hsla?\(([0-9]+),\s*([0-9]+)%,\s*([0-9]+)%,?\s*([0-9.]+)?\)\s*$/i,K=/^\s*#?([0-9a-f]{3}|[0-9a-f]{6})\s*$/i,Ye=/^\s*#?([0-9a-f]{3})\s*$/i,Ze={hex:Re,rgb:Pe,hsl:Ie},z={hex:"transparent",rgb:"rgba(0, 0, 0, 0)",hsl:"hsla(0, 0%, 0%, 0)"},Y=n=>{let l=n==null?void 0:n.match(We);if(!l)return[0,0,0,1];let[,c,h,u,d=1]=l;return[c,h,u,d].map(Number)},$=n=>{if(!n)return;let l=!0;if(Ae.test(n)){let[e,t,r,a]=Y(n),[o,i,s]=_.default.rgb.hsl([e,t,r])||[0,0,0];return{valid:l,value:n,keyword:_.default.rgb.keyword([e,t,r]),colorSpace:"rgb",rgb:n,hsl:`hsla(${o}, ${i}%, ${s}%, ${a})`,hex:`#${_.default.rgb.hex([e,t,r]).toLowerCase()}`}}if(Ue.test(n)){let[e,t,r,a]=Y(n),[o,i,s]=_.default.hsl.rgb([e,t,r])||[0,0,0];return{valid:l,value:n,keyword:_.default.hsl.keyword([e,t,r]),colorSpace:"hsl",rgb:`rgba(${o}, ${i}, ${s}, ${a})`,hsl:n,hex:`#${_.default.hsl.hex([e,t,r]).toLowerCase()}`}}let c=n.replace("#",""),h=_.default.keyword.rgb(c)||_.default.hex.rgb(c),u=_.default.rgb.hsl(h),d=n;if(/[^#a-f0-9]/i.test(n)?d=c:K.test(n)&&(d=`#${c}`),d.startsWith("#"))l=K.test(d);else try{_.default.keyword.hex(d)}catch{l=!1}return{valid:l,value:d,keyword:_.default.rgb.keyword(h),colorSpace:"hex",rgb:`rgba(${h[0]}, ${h[1]}, ${h[2]}, 1)`,hsl:`hsla(${u[0]}, ${u[1]}%, ${u[2]}%, 1)`,hex:d}},Je=(n,l,c)=>{if(!n||!(l!=null&&l.valid))return z[c];if(c!=="hex")return(l==null?void 0:l[c])||z[c];if(!l.hex.startsWith("#"))try{return`#${_.default.keyword.hex(l.hex)}`}catch{return z.hex}let h=l.hex.match(Ye);if(!h)return K.test(l.hex)?l.hex:z.hex;let[u,d,e]=h[1].split("");return`#${u}${u}${d}${d}${e}${e}`},Qe=(n,l)=>{let[c,h]=p.useState(n||""),[u,d]=p.useState(()=>$(c)),[e,t]=p.useState((u==null?void 0:u.colorSpace)||"hex");p.useEffect(()=>{let i=n||"",s=$(i);h(i),d(s),t((s==null?void 0:s.colorSpace)||"hex")},[n]);let r=p.useMemo(()=>Je(c,u,e).toLowerCase(),[c,u,e]),a=p.useCallback(i=>{let s=$(i),f=(s==null?void 0:s.value)||i||"";h(f),f===""&&(d(void 0),l(void 0)),s&&(d(s),t(s.colorSpace),l(s.value))},[l]),o=p.useCallback(()=>{let i=R.indexOf(e)+1;i>=R.length&&(i=0),t(R[i]);let s=(u==null?void 0:u[R[i]])||"";h(s),l(s)},[u,e,l]);return{value:c,realValue:r,updateValue:a,color:u,colorSpace:e,cycleColorSpace:o}},I=n=>n.replace(/\s*/,"").toLowerCase(),er=(n,l,c)=>{let[h,u]=p.useState(l!=null&&l.valid?[l]:[]);p.useEffect(()=>{l===void 0&&u([])},[l]);let d=p.useMemo(()=>(n||[]).map(t=>typeof t=="string"?$(t):t.title?{...$(t.color),keyword:t.title}:$(t.color)).concat(h).filter(Boolean).slice(-27),[n,h]),e=p.useCallback(t=>{t!=null&&t.valid&&(d.some(r=>I(r[c])===I(t[c]))||u(r=>r.concat(t)))},[c,d]);return{presets:d,addPreset:e}},rr=({name:n,value:l,onChange:c,onFocus:h,onBlur:u,presetColors:d,startOpen:e=!1,argType:t})=>{var E;let r=p.useCallback(ce(c,200),[c]),{value:a,realValue:o,updateValue:i,color:s,colorSpace:f,cycleColorSpace:g}=Qe(l,r),{presets:b,addPreset:y}=er(d,s,f),v=Ze[f],w=!!((E=t==null?void 0:t.table)!=null&&E.readonly);return m.createElement(Le,{"aria-readonly":w},m.createElement(Be,{startOpen:e,trigger:w?[null]:void 0,closeOnOutsideClick:!0,onVisibleChange:()=>y(s),tooltip:m.createElement(Xe,null,m.createElement(v,{color:o==="transparent"?"#000000":o,onChange:i,onFocus:h,onBlur:u}),b.length>0&&m.createElement(Ke,null,b.map((k,P)=>m.createElement(Z,{key:`${k.value}-${P}`,hasChrome:!1,tooltip:m.createElement(Ge,{note:k.keyword||k.value})},m.createElement(U,{value:k[f],active:s&&I(k[f])===I(s[f]),onClick:()=>i(k.value)})))))},m.createElement(U,{value:o,style:{margin:4}})),m.createElement(Fe,{id:he(n),value:a,onChange:k=>i(k.target.value),onFocus:k=>k.target.select(),readOnly:w,placeholder:"Choose color..."}),a?m.createElement(Te,{onClick:g}):null)},fr=rr;export{rr as ColorControl,fr as default};

package/dist/assets/CssBaseline-BGmj7vII.js

@@ -0,0 +1,191 @@
+import{j as e}from"./jsx-runtime-CnH95YSl.js";import{useMDXComponents as r}from"./index-BeeV6X6A.js";import"./index-DI1lVgTb.js";import{M as d,C as s}from"./index-DiEiQB-f.js";import{S as l,A as c,a as h,B as a,C as p,b as x,D as m,c as i,d as j,e as u,f,E as b,g,F as y,H as T,I as M,K as v,M as k,P as w,h as H,O as L,Q as q,i as S,j as D,k as E,l as U,m as W,n as z,U as N,V as C}from"./CssBaseline.stories-CP5iNADe.js";import"./index-NdkWRN8K.js";import"./_commonjsHelpers-gnU0ypJ3.js";import"./preview-nv3jWDyz.js";import"./iframe-B5wE2ay9.js";import"./DocsRenderer-CFRXHY34-P8M6yttG.js";import"./client-ByW5HbEz.js";import"./index-DieBXP3Z.js";import"./index-BJTM6NaI.js";import"./index-B5xazMy1.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";import"./OdysseyStorybookThemeDecorator-DsQ8XVOG.js";import"./OdysseyThemeProvider-uYQ_l8PJ.js";import"./OdysseyProvider-YUKfsUrL.js";function o(t){const n={blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",li:"li",p:"p",strong:"strong",ul:"ul",...r(),...t.components};return e.jsxs(e.Fragment,{children:[e.jsx(d,{of:l}),`
+`,e.jsx(n.h1,{id:"css-baseline",children:"CSS Baseline"}),`
+`,e.jsxs(n.p,{children:['Odyssey provides two components that insert "global" styles into your application, ',e.jsx(n.code,{children:"<CssBaseline>"})," and ",e.jsx(n.code,{children:"<ScopedCssBaseline>"}),"."]}),`
+`,e.jsx(n.h2,{id:"cssbaseline",children:e.jsx(n.code,{children:"<CssBaseline>"})}),`
+`,e.jsxs(n.p,{children:["The ",e.jsx(n.code,{children:"<CssBaseline>"})," component updates the ",e.jsx(n.code,{children:"<html>"})," and ",e.jsx(n.code,{children:"<body>"})," elements to provide page-wide defaults expected by Odyssey."]}),`
+`,e.jsx(n.p,{children:"This component is required and should be inserted at the top of your view."}),`
+`,e.jsxs(n.p,{children:["You can also use the ",e.jsx(n.code,{children:"hasCssBaseline"})," prop on the ",e.jsx(n.code,{children:"OdysseyProvider"})," component which is much simpler to use if you're using Odyssey."]}),`
+`,e.jsx(n.h3,{id:"layout",children:"Layout"}),`
+`,e.jsxs(n.ul,{children:[`
+`,e.jsxs(n.li,{children:["The ",e.jsx(n.code,{children:"box-sizing"})," property is set to ",e.jsx(n.code,{children:"border-box"})," on the ",e.jsx(n.code,{children:"<html>"})," element. Every element is declared to inherit this property, ensuring that the element's declared width properly reflects the padding or border."]}),`
+`,e.jsx(n.li,{children:"Removes margin on these elements in all browsers"}),`
+`]}),`
+`,e.jsx(n.h3,{id:"typography",children:"Typography"}),`
+`,e.jsxs(n.ul,{children:[`
+`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"theme.typography.fontSize"})," is declared on ",e.jsx(n.code,{children:"<html>"}),", setting the base for all rem units"]}),`
+`,e.jsxs(n.li,{children:["The ",e.jsx(n.code,{children:"theme.typography.body1"})," style is applied to the ",e.jsx(n.code,{children:"<body>"})," element"]}),`
+`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"theme.typography.fontWeightBold"})," is set for the ",e.jsx(n.code,{children:"<b>"})," and ",e.jsx(n.code,{children:"<strong>"})," elements"]}),`
+`,e.jsx(n.li,{children:"Enables font-smoothing for improved readability"}),`
+`]}),`
+`,e.jsx(n.h2,{id:"scopedcssbaseline",children:e.jsx(n.code,{children:"<ScopedCssBaseline>"})}),`
+`,e.jsxs(n.p,{children:["The ",e.jsx(n.code,{children:"<ScopedCssBaseline>"})," component provides additional, optional element styles."]}),`
+`,e.jsxs(n.p,{children:["These styles will only apply to children of ",e.jsx(n.code,{children:"<ScopedCssBaseline>"}),"."]}),`
+`,e.jsx(n.h3,{id:"abbr",children:"abbr"}),`
+`,e.jsxs(n.blockquote,{children:[`
+`,e.jsxs(n.p,{children:["The HTML ",e.jsx(n.code,{children:"<abbr>"})," element represents an abbreviation or acronym; the optional title attribute can provide an expansion or description for the abbreviation. If present, title must contain this full description and nothing else. - ",e.jsx("cite",{children:e.jsx("a",{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr",children:"MDN"})})]}),`
+`]}),`
+`,e.jsx(s,{of:c}),`
+`,e.jsx(n.h4,{id:"accessibility",children:"Accessibility"}),`
+`,e.jsx(n.p,{children:"Writing out the acronym or abbreviation the first time it appears in your view will help people understand it, especially when the content is technical."}),`
+`,e.jsxs(n.p,{children:["Only include a ",e.jsx(n.code,{children:"title"})," if expanding the abbreviation or acronym is impossible. The difference between the announced phrase and what appears on the screen can confuse users."]}),`
+`,e.jsx(n.h3,{id:"address",children:"address"}),`
+`,e.jsxs(n.blockquote,{children:[`
+`,e.jsxs(n.p,{children:["The HTML ",e.jsx(n.code,{children:"<address>"})," element indicates that the enclosed HTML provides contact information for a person or people, or for an organization. - ",e.jsx("cite",{children:e.jsx("a",{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/address",children:"MDN"})})]}),`
+`]}),`
+`,e.jsx(s,{of:h}),`
+`,e.jsx(n.h3,{id:"blockquote",children:"blockquote"}),`
+`,e.jsxs(n.blockquote,{children:[`
+`,e.jsxs(n.p,{children:["The HTML ",e.jsx(n.code,{children:"<blockquote>"})," Element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation (see Notes for how to change it). A URL for the source of the quotation may be given using the cite attribute, while a text representation of the source can be given using the ",e.jsx(n.code,{children:"<cite>"})," element. - ",e.jsx("cite",{children:e.jsx("a",{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote",children:"MDN"})})]}),`
+`]}),`
+`,e.jsx(s,{of:a}),`
+`,e.jsx(n.h3,{id:"cite",children:"cite"}),`
+`,e.jsxs(n.blockquote,{children:[`
+`,e.jsxs(n.p,{children:["The HTML Citation element (",e.jsx(n.code,{children:"<cite>"}),") is used to describe a reference to a cited creative work, and must include the title of that work. - ",e.jsx("cite",{children:e.jsx("a",{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite",children:"MDN"})})]}),`
+`]}),`
+`,e.jsx(s,{of:p}),`
+`,e.jsx(n.h3,{id:"code",children:"code"}),`
+`,e.jsxs(n.blockquote,{children:[`
+`,e.jsxs(n.p,{children:["The HTML ",e.jsx(n.code,{children:"<code>"})," element displays its contents styled in a fashion intended to indicate that the text is a short fragment of computer code. By default, the content text is displayed using the user agent's default monospace font. - ",e.jsx("cite",{children:e.jsx("a",{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code",children:"MDN"})})]}),`
+`]}),`
+`,e.jsx(s,{of:x}),`
+`,e.jsx(n.h3,{id:"del",children:"del"}),`
+`,e.jsxs(n.blockquote,{children:[`
+`,e.jsxs(n.p,{children:["The HTML ",e.jsx(n.code,{children:"<del>"}),' element represents a range of text that has been deleted from a document. This can be used when rendering "track changes" or source code diff information, for example. The ',e.jsx(n.code,{children:"<ins>"})," element can be used for the opposite purpose: to indicate text that has been added to the document. - ",e.jsx("cite",{children:e.jsx("a",{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del",children:"MDN"})})]}),`
+`]}),`
+`,e.jsx(s,{of:m}),`
+`,e.jsx(n.h4,{id:"accessibility-1",children:"Accessibility"}),`
+`,e.jsxs(n.p,{children:["Many screen readers do not let users know of the presence of ",e.jsx(n.code,{children:"del"}),". To fix this, you should consider using ",e.jsx(n.code,{children:"data-a11y-start"})," and ",e.jsx(n.code,{children:"data-a11y-end"}),", prepend and append assistive text to the contents of the tag. In the above example, there are additional spaces before and after the text, this is intentional. Not adding these spaces will cause the content within the tag to run into the text within the tag."]}),`
+`,e.jsx(n.h3,{id:"details",children:"details"}),`
+`,e.jsxs(n.blockquote,{children:[`
+`,e.jsxs(n.p,{children:["The HTML Details Element (",e.jsx(n.code,{children:"<details>"}),') creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label can be provided using the ',e.jsx(n.code,{children:"<summary>"})," element. [...] If the first child of the ",e.jsx(n.code,{children:"<details>"})," element is a ",e.jsx(n.code,{children:"<summary>"}),", the contents of the ",e.jsx(n.code,{children:"<summary>"})," element are used as the label for the disclosure widget. - ",e.jsx("cite",{children:e.jsx("a",{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details",children:"MDN"})})]}),`
+`]}),`
+`,e.jsx(s,{of:i}),`
+`,e.jsx(n.h3,{id:"dfn",children:"dfn"}),`
+`,e.jsxs(n.blockquote,{children:[`
+`,e.jsxs(n.p,{children:["The HTML Definition element (",e.jsx(n.code,{children:"<dfn>)"})," is used to indicate the term being defined within the context of a definition phrase or sentence. The ",e.jsx(n.code,{children:"<p>"})," element, the ",e.jsx(n.code,{children:"<dt>"}),"/",e.jsx(n.code,{children:"<dd>"})," pairing, or the ",e.jsx(n.code,{children:"<section>"})," element which is the nearest ancestor of the ",e.jsx(n.code,{children:"<dfn>"})," is considered to be the definition of the term."]}),`
+`]}),`
+`,e.jsxs(n.p,{children:["There are multiple, valid ways to use ",e.jsx(n.code,{children:"<dfn>"}),". For the sake of usability, Odyssey recommends you follow one of two formats."]}),`
+`,e.jsxs(n.p,{children:["For most terms, the content of ",e.jsx(n.code,{children:"<dfn>"})," should be term you are defining:"]}),`
+`,e.jsx(s,{of:j}),`
+`,e.jsxs(n.p,{children:["If you're referencing an acronym or abbreviation, you may also combine it with ",e.jsx(n.code,{children:"<abbr>"}),":"]}),`
+`,e.jsx(s,{of:u}),`
+`,e.jsx(n.p,{children:'In this example, the browser can correctly identify "All Purpose Flour" as the defined term, even though "APF" is the visible acronym.'}),`
+`,e.jsxs(n.p,{children:["In both cases, utilizing the ",e.jsx(n.code,{children:"id"})," attribute allows you to deep link to the definition, providing users with quick access."]}),`
+`,e.jsx(n.h3,{id:"dl",children:"dl"}),`
+`,e.jsxs(n.blockquote,{children:[`
+`,e.jsxs(n.p,{children:["The HTML ",e.jsx(n.code,{children:"<dl>"})," element represents a description list. The element encloses a list of groups of terms (specified using the ",e.jsx(n.code,{children:"<dt>"})," element) and descriptions (provided by ",e.jsx(n.code,{children:"<dd>"})," elements). Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs). - ",e.jsx("cite",{children:e.jsx("a",{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl",children:"MDN"})})]}),`
+`]}),`
+`,e.jsx(s,{of:f}),`
+`,e.jsx(n.h4,{id:"accessibility-2",children:"Accessibility"}),`
+`,e.jsxs(n.p,{children:["Screen readers announce ",e.jsx(n.code,{children:"<dl>"})," content differently - some may not indicate that the content is a list. To improve usability make sure each list item's content communicates its relationship to other list items."]}),`
+`,e.jsx(n.h3,{id:"em",children:"em"}),`
+`,e.jsxs(n.blockquote,{children:[`
+`,e.jsxs(n.p,{children:["The HTML ",e.jsx(n.code,{children:"<em>"})," element marks text that has stress emphasis. The ",e.jsx(n.code,{children:"<em>"})," element can be nested, with each level of nesting indicating a greater degree of emphasis. - ",e.jsx("cite",{children:e.jsx("a",{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em",children:"MDN"})})]}),`
+`]}),`
+`,e.jsx(s,{of:b}),`
+`,e.jsxs(n.p,{children:["You can also nest ",e.jsx(n.code,{children:"em"})," tags to provide an added level of emphasis. Doing so will provide additional styling."]}),`
+`,e.jsx(s,{of:g}),`
+`,e.jsx(n.h3,{id:"figure--figcaption",children:"figure & figcaption"}),`
+`,e.jsxs(n.blockquote,{children:[`
+`,e.jsxs(n.p,{children:["The HTML ",e.jsx(n.code,{children:"<figure>"})," (Figure With Optional Caption) element represents self-contained content, potentially with an optional caption, which is specified using the (",e.jsx(n.code,{children:"<figcaption>"}),") element. The figure, its caption, and its contents are referenced as a single unit. - ",e.jsx("cite",{children:e.jsx("a",{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure",children:"MDN"})})]}),`
+`]}),`
+`,e.jsx(s,{of:y}),`
+`,e.jsx(n.h4,{id:"usage",children:"Usage"}),`
+`,e.jsxs(n.p,{children:[e.jsx(n.code,{children:"<figure>"})," is appropriate for supplemental content - standard examples include supporting images, diagrams, and code snippets. Please include a ",e.jsx(n.code,{children:"<figcaption>"})," to ensure your content has appropriate context."]}),`
+`,e.jsx(n.h3,{id:"hr",children:"hr"}),`
+`,e.jsxs(n.blockquote,{children:[`
+`,e.jsxs(n.p,{children:["The HTML ",e.jsx(n.code,{children:"<hr/>"})," element represents a thematic break between paragraph-level elements: for example, a change of scene in a story, or a shift of topic within a section. - ",e.jsx("cite",{children:e.jsx("a",{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr",children:"MDN"})})]}),`
+`]}),`
+`,e.jsx(s,{of:T}),`
+`,e.jsx(n.h3,{id:"ins",children:"ins"}),`
+`,e.jsxs(n.blockquote,{children:[`
+`,e.jsxs(n.p,{children:["The HTML ",e.jsx(n.code,{children:"<ins>"})," element represents a range of text that has been added to a document. You can use the ",e.jsx(n.code,{children:"<del>"})," element to similarly represent a range of text that has been deleted from the document. - ",e.jsx("cite",{children:e.jsx("a",{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ins",children:"MDN"})})]}),`
+`]}),`
+`,e.jsx(s,{of:M}),`
+`,e.jsx(n.h4,{id:"accessibility-3",children:"Accessibility"}),`
+`,e.jsxs(n.p,{children:["Many screen readers do not let users know of the presence of ",e.jsx(n.code,{children:"ins"}),". To fix this, you should consider using ",e.jsx(n.code,{children:"data-a11y-start"})," and ",e.jsx(n.code,{children:"data-a11y-end"}),", prepend and append assistive text to the contents of the tag. In the above example, there are additional spaces before and after the text, this is intentional. Not adding these spaces will cause the content within the tag to run into the text within the tag."]}),`
+`,e.jsx(n.h3,{id:"kbd",children:"kbd"}),`
+`,e.jsxs(n.blockquote,{children:[`
+`,e.jsxs(n.p,{children:["The HTML Keyboard Input element (",e.jsx(n.code,{children:"<kbd>"}),") represents a span of inline text denoting textual user input from a keyboard, voice input, or any other text entry device. By convention, the user agent defaults to rendering the contents of a ",e.jsx(n.code,{children:"<kbd>"})," element using its default monospace font, although this is not mandated by the HTML standard. - ",e.jsx("cite",{children:e.jsx("a",{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd",children:"MDN"})})]}),`
+`]}),`
+`,e.jsx(s,{of:v}),`
+`,e.jsx(n.h4,{id:"usage-1",children:"Usage"}),`
+`,e.jsxs(n.p,{children:["When combined with ",e.jsx("a",{href:"#samp",children:e.jsx(n.code,{children:"<samp>"})}),", the background of this element will swap to white for better contrast."]}),`
+`,e.jsx(n.h2,{id:"mark",children:"mark"}),`
+`,e.jsxs(n.blockquote,{children:[`
+`,e.jsxs(n.p,{children:["The HTML Mark Text element (",e.jsx(n.code,{children:"<mark>"}),") represents text which is marked or highlighted for reference or notation purposes, due to the marked passage's relevance or importance in the enclosing context. - ",e.jsx("cite",{children:e.jsx("a",{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark",children:"MDN"})})]}),`
+`]}),`
+`,e.jsx(s,{of:k}),`
+`,e.jsxs(n.p,{children:["Many screen readers do not let users know of the presence of ",e.jsx(n.code,{children:"mark"}),". To fix this, you should consider using ",e.jsx(n.code,{children:"data-a11y-start"})," and ",e.jsx(n.code,{children:"data-a11y-end"}),", prepend and append assistive text to the contents of the tag. In the above example, there are additional spaces before and after the text, this is intentional. Not adding these spaces will cause the content within the tag to run into the text within the tag."]}),`
+`,e.jsx(n.h3,{id:"p",children:"p"}),`
+`,e.jsxs(n.blockquote,{children:[`
+`,e.jsxs(n.p,{children:["The ",e.jsx(n.code,{children:"<p>"})," HTML element represents a paragraph. Paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by blank lines and/or first-line indentation, but HTML paragraphs can be any structural grouping of related content, such as images or form fields. - ",e.jsx("cite",{children:e.jsx("a",{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p",children:"MDN"})})]}),`
+`]}),`
+`,e.jsx(s,{of:w}),`
+`,e.jsx(n.h3,{id:"pre",children:"pre"}),`
+`,e.jsxs(n.blockquote,{children:[`
+`,e.jsxs(n.p,{children:["The HTML ",e.jsx(n.code,{children:"<pre>"}),' element represents preformatted text which is to be presented exactly as written in the HTML file. The text is typically rendered using a non-proportional ("monospace") font. Whitespace inside this element is displayed as written. - ',e.jsx("cite",{children:e.jsx("a",{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre",children:"MDN"})})]}),`
+`]}),`
+`,e.jsx(s,{of:H}),`
+`,e.jsxs(n.p,{children:[e.jsx(n.strong,{children:"Note:"})," This example is currently broken due to the way Storybook handles linebreaks."]}),`
+`,e.jsx(n.h4,{id:"usage-2",children:"Usage"}),`
+`,e.jsxs(n.p,{children:["Since the ",e.jsx(n.code,{children:"pre"})," tag preserves all whitespace, it's best to begin and end your content without linebreaks as below."]}),`
+`,e.jsx(n.h3,{id:"ol",children:"ol"}),`
+`,e.jsxs(n.blockquote,{children:[`
+`,e.jsxs(n.p,{children:["The ",e.jsx(n.code,{children:"<ol>"})," HTML element represents an ordered list of items — typically rendered as a numbered list. - ",e.jsx("cite",{children:e.jsx("a",{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol",children:"MDN"})})]}),`
+`]}),`
+`,e.jsx(s,{of:L}),`
+`,e.jsx(n.h3,{id:"q",children:"q"}),`
+`,e.jsxs(n.blockquote,{children:[`
+`,e.jsxs(n.p,{children:["The HTML ",e.jsx(n.code,{children:"<q>"})," element indicates that the enclosed text is a short inline quotation. Most modern browsers implement this by surrounding the text in quotation marks. This element is intended for short quotations that don't require paragraph breaks; for long quotations use the ",e.jsx(n.code,{children:"<blockquote>"})," element. - ",e.jsx("cite",{children:e.jsx("a",{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q",children:"MDN"})})]}),`
+`]}),`
+`,e.jsx(s,{of:q}),`
+`,e.jsx(n.h4,{id:"usage-3",children:"Usage"}),`
+`,e.jsxs(n.p,{children:["Only use the ",e.jsx(n.code,{children:"<q>"})," element when you're quoting a person or text. Don't use this element for sarcasm, scare quotes, or similar."]}),`
+`,e.jsx(n.h4,{id:"smart-quotes",children:"Smart quotes"}),`
+`,e.jsxs(n.p,{children:["Outside of ",e.jsx(n.code,{children:"<q>"})," and ",e.jsx(n.code,{children:"<blockquote>"}),", browsers do not enable automatic smart quotes (“”). Instead, they rely on content authors to determine which type to use. Since we cannot ensure broad consistency, Odyssey does not apply smart quotes to ",e.jsx(n.code,{children:"<q>"}),"."]}),`
+`,e.jsx(n.h3,{id:"s",children:"s"}),`
+`,e.jsxs(n.blockquote,{children:[`
+`,e.jsxs(n.p,{children:["The HTML ",e.jsx(n.code,{children:"<s>"})," element renders text with a strikethrough, or a line through it. Use the ",e.jsx(n.code,{children:"<s>"})," element to represent things that are no longer relevant or no longer accurate. However, ",e.jsx(n.code,{children:"<s>"})," is not appropriate when indicating document edits; for that, use the ",e.jsx(n.code,{children:"<del>"})," and ",e.jsx(n.code,{children:"<ins>"})," elements, as appropriate. - ",e.jsx("cite",{children:e.jsx("a",{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/s",children:"MDN"})})]}),`
+`]}),`
+`,e.jsx(s,{of:S}),`
+`,e.jsx(n.h3,{id:"samp",children:"samp"}),`
+`,e.jsxs(n.blockquote,{children:[`
+`,e.jsxs(n.p,{children:["The ",e.jsx(n.code,{children:"<samp>"})," HTML element is used to enclose inline text which represents sample (or quoted) output from a computer program. Its contents are typically rendered using the browser's default monospaced font. - ",e.jsx("cite",{children:e.jsx("a",{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/samp",children:"MDN"})})]}),`
+`]}),`
+`,e.jsx(s,{of:D}),`
+`,e.jsx(n.h3,{id:"small",children:"small"}),`
+`,e.jsxs(n.blockquote,{children:[`
+`,e.jsxs(n.p,{children:["The HTML ",e.jsx(n.code,{children:"<small>"})," element represents side-comments and small print, like copyright and legal text, independent of its styled presentation. By default, it renders text within it one font-size smaller, such as from small to x-small. - ",e.jsx("cite",{children:e.jsx("a",{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/small",children:"MDN"})})]}),`
+`]}),`
+`,e.jsx(s,{of:E}),`
+`,e.jsx(n.h3,{id:"strong",children:"strong"}),`
+`,e.jsxs(n.blockquote,{children:[`
+`,e.jsxs(n.p,{children:["The ",e.jsx(n.code,{children:"<strong>"})," HTML element indicates that its contents have strong importance, seriousness, or urgency. Browsers typically render the contents in bold type. - ",e.jsx("cite",{children:e.jsx("a",{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong",children:"MDN"})})]}),`
+`]}),`
+`,e.jsx(s,{of:U}),`
+`,e.jsx(n.h3,{id:"sub",children:"sub"}),`
+`,e.jsxs(n.blockquote,{children:[`
+`,e.jsxs(n.p,{children:["The HTML Subscript element (",e.jsx(n.code,{children:"<sub>"}),") specifies inline text which should be displayed as subscript for solely typographical reasons. Subscripts are typically rendered with a lowered baseline using smaller text. - ",e.jsx("cite",{children:e.jsx("a",{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sub",children:"MDN"})})]}),`
+`]}),`
+`,e.jsx(s,{of:W}),`
+`,e.jsx(n.h3,{id:"summary",children:"summary"}),`
+`,e.jsxs(n.blockquote,{children:[`
+`,e.jsxs(n.p,{children:["The HTML Disclosure Summary element (",e.jsx(n.code,{children:"<summary>"}),") element specifies a summary, caption, or legend for a ",e.jsx(n.code,{children:"<details>"})," element's disclosure box. Clicking the ",e.jsx(n.code,{children:"<summary>"})," element toggles the state of the parent ",e.jsx(n.code,{children:"<details>"})," element open and closed."]}),`
+`]}),`
+`,e.jsx(s,{of:i}),`
+`,e.jsx(n.h3,{id:"sup",children:"sup"}),`
+`,e.jsxs(n.blockquote,{children:[`
+`,e.jsxs(n.p,{children:["The HTML Superscript element (",e.jsx(n.code,{children:"<sup>"}),") specifies inline text which is to be displayed as superscript for solely typographical reasons. Superscripts are usually rendered with a raised baseline using smaller text. - ",e.jsx("cite",{children:e.jsx("a",{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sup",children:"MDN"})})]}),`
+`]}),`
+`,e.jsx(s,{of:z}),`
+`,e.jsx(n.h3,{id:"ul",children:"ul"}),`
+`,e.jsxs(n.blockquote,{children:[`
+`,e.jsxs(n.p,{children:["The ",e.jsx(n.code,{children:"<ul>"})," HTML element represents an unordered list of items, typically rendered as a bulleted list. - ",e.jsx("cite",{children:e.jsx("a",{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong",children:"MDN"})})]}),`
+`]}),`
+`,e.jsx(s,{of:N}),`
+`,e.jsx(n.h3,{id:"var",children:"var"}),`
+`,e.jsxs(n.blockquote,{children:[`
+`,e.jsxs(n.p,{children:["The HTML ",e.jsx(n.code,{children:"<var>"})," element represents the name of a variable in a mathematical expression or a programming context. - ",e.jsx("cite",{children:e.jsx("a",{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/var",children:"MDN"})})]}),`
+`]}),`
+`,e.jsx(s,{of:C})]})}function se(t={}){const{wrapper:n}={...r(),...t.components};return n?e.jsx(n,{...t,children:e.jsx(o,{...t})}):o(t)}export{se as default};