@ndla/primitives 1.0.128-alpha.0 → 1.0.130-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (97) hide show
  1. package/es/Accordion.mjs.map +1 -1
  2. package/es/ArticleLists.mjs +7 -0
  3. package/es/ArticleLists.mjs.map +1 -1
  4. package/es/Badge.mjs.map +1 -1
  5. package/es/BlockQuote.mjs.map +1 -1
  6. package/es/Button.mjs.map +1 -1
  7. package/es/Card/Card.mjs.map +1 -1
  8. package/es/Checkbox.mjs.map +1 -1
  9. package/es/Combobox.mjs.map +1 -1
  10. package/es/DatePicker.mjs.map +1 -1
  11. package/es/Dialog.mjs.map +1 -1
  12. package/es/ErrorMessage/ErrorMessage.mjs.map +1 -1
  13. package/es/ExpandableBox.mjs.map +1 -1
  14. package/es/Field.mjs.map +1 -1
  15. package/es/FieldErrorMessage.mjs.map +1 -1
  16. package/es/FieldHelper.mjs.map +1 -1
  17. package/es/Figure.mjs.map +1 -1
  18. package/es/FileUpload.mjs.map +1 -1
  19. package/es/FramedContent.mjs.map +1 -1
  20. package/es/Hero.mjs.map +1 -1
  21. package/es/Image.mjs.map +1 -1
  22. package/es/Input.mjs.map +1 -1
  23. package/es/Label.mjs.map +1 -1
  24. package/es/Layout/PageContainer.mjs.map +1 -1
  25. package/es/Layout/PageContent.mjs +5 -0
  26. package/es/Layout/PageContent.mjs.map +1 -1
  27. package/es/ListItem/ListItem.mjs.map +1 -1
  28. package/es/Menu.mjs.map +1 -1
  29. package/es/MessageBox.mjs.map +1 -1
  30. package/es/NdlaLogo.mjs.map +1 -1
  31. package/es/Pagination.mjs.map +1 -1
  32. package/es/Popover.mjs.map +1 -1
  33. package/es/RadioGroup.mjs +1 -1
  34. package/es/RadioGroup.mjs.map +1 -1
  35. package/es/Select.mjs.map +1 -1
  36. package/es/Skeleton.mjs.map +1 -1
  37. package/es/Slider.mjs +1 -0
  38. package/es/Slider.mjs.map +1 -1
  39. package/es/Spinner.mjs.map +1 -1
  40. package/es/Switch.mjs.map +1 -1
  41. package/es/Table.mjs.map +1 -1
  42. package/es/Tabs.mjs.map +1 -1
  43. package/es/TagsInput.mjs.map +1 -1
  44. package/es/Text.mjs.map +1 -1
  45. package/es/Toast.mjs.map +1 -1
  46. package/es/ToggleGroup.mjs.map +1 -1
  47. package/es/Tooltip.mjs.map +1 -1
  48. package/es/Tree/Tree.mjs.map +1 -1
  49. package/lib/Accordion.js.map +1 -1
  50. package/lib/ArticleLists.js +7 -0
  51. package/lib/ArticleLists.js.map +1 -1
  52. package/lib/Badge.js.map +1 -1
  53. package/lib/BlockQuote.js.map +1 -1
  54. package/lib/Button.js.map +1 -1
  55. package/lib/Card/Card.js.map +1 -1
  56. package/lib/Checkbox.js.map +1 -1
  57. package/lib/Combobox.js.map +1 -1
  58. package/lib/DatePicker.js.map +1 -1
  59. package/lib/Dialog.js.map +1 -1
  60. package/lib/ErrorMessage/ErrorMessage.js.map +1 -1
  61. package/lib/ExpandableBox.js.map +1 -1
  62. package/lib/Field.js.map +1 -1
  63. package/lib/FieldErrorMessage.js.map +1 -1
  64. package/lib/FieldHelper.js.map +1 -1
  65. package/lib/Figure.js.map +1 -1
  66. package/lib/FileUpload.js.map +1 -1
  67. package/lib/FramedContent.js.map +1 -1
  68. package/lib/Hero.js.map +1 -1
  69. package/lib/Image.js.map +1 -1
  70. package/lib/Input.js.map +1 -1
  71. package/lib/Label.js.map +1 -1
  72. package/lib/Layout/PageContainer.js.map +1 -1
  73. package/lib/Layout/PageContent.js +5 -0
  74. package/lib/Layout/PageContent.js.map +1 -1
  75. package/lib/ListItem/ListItem.js.map +1 -1
  76. package/lib/Menu.js.map +1 -1
  77. package/lib/MessageBox.js.map +1 -1
  78. package/lib/NdlaLogo.js.map +1 -1
  79. package/lib/Pagination.js.map +1 -1
  80. package/lib/Popover.js.map +1 -1
  81. package/lib/RadioGroup.js +1 -1
  82. package/lib/RadioGroup.js.map +1 -1
  83. package/lib/Select.js.map +1 -1
  84. package/lib/Skeleton.js.map +1 -1
  85. package/lib/Slider.js +1 -0
  86. package/lib/Slider.js.map +1 -1
  87. package/lib/Spinner.js.map +1 -1
  88. package/lib/Switch.js.map +1 -1
  89. package/lib/Table.js.map +1 -1
  90. package/lib/Tabs.js.map +1 -1
  91. package/lib/TagsInput.js.map +1 -1
  92. package/lib/Text.js.map +1 -1
  93. package/lib/Toast.js.map +1 -1
  94. package/lib/ToggleGroup.js.map +1 -1
  95. package/lib/Tooltip.js.map +1 -1
  96. package/lib/Tree/Tree.js.map +1 -1
  97. package/package.json +2 -2
package/es/Toast.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Toast.mjs","names":[],"sources":["../src/Toast.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Toast, toastAnatomy } from \"@ark-ui/react\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps, RecipeVariantProps } from \"@ndla/styled-system/types\";\nimport type { RefAttributes } from \"react\";\nimport { Text, type TextProps } from \"./Text\";\n\nconst toastRecipe = sva({\n slots: toastAnatomy.keys(),\n base: {\n root: {\n position: \"relative\",\n borderRadius: \"xsmall\",\n boxShadow: \"medium\",\n minWidth: \"20rem\",\n maxWidth: \"30rem\",\n height: \"var(--height)\",\n opacity: \"var(--opacity)\",\n overflowWrap: \"anywhere\",\n padding: \"small\",\n scale: \"var(--scale)\",\n translate: \"var(--x) var(--y) 0\",\n willChange: \"translate, scale, opacity, height\",\n zIndex: \"var(--z-index)\",\n transitionDuration: \"slow\",\n transitionProperty: \"translate, scale, opacity, height\",\n transitionTimingFunction: \"default\",\n _motionReduce: {\n transition: \"none\",\n transitionDuration: \"0s\",\n },\n },\n title: {\n paddingInlineEnd: \"xxlarge\",\n },\n closeTrigger: {\n position: \"absolute\",\n top: \"xxsmall\",\n right: \"xxsmall\",\n },\n description: {\n paddingInlineEnd: \"xxlarge\",\n },\n },\n defaultVariants: {\n variant: \"light\",\n },\n variants: {\n variant: {\n light: {\n root: {\n background: \"surface.brand.1.moderate\",\n color: \"text.default\",\n },\n },\n dark: {\n root: {\n background: \"surface.brand.1.strong\",\n color: \"text.onAction\",\n },\n },\n },\n },\n});\n\nconst { withProvider, withContext } = createStyleContext(toastRecipe);\n\nexport type ToastRootVariantProps = NonNullable<RecipeVariantProps<typeof toastRecipe>>;\n\nexport interface ToastRootProps extends Toast.RootProps, StyledProps, ToastRootVariantProps {}\nexport const ToastRoot = withProvider(Toast.Root, \"root\", { baseComponent: true });\n\nexport const ToastActionTrigger = withContext(Toast.ActionTrigger, \"actionTrigger\", { baseComponent: true });\n\nexport const ToastCloseTrigger = withContext(Toast.CloseTrigger, \"closeTrigger\", { baseComponent: true });\n\nconst InternalToastDescription = withContext(Toast.Description, \"description\");\n\ninterface ToastDescriptionProps\n extends Omit<Toast.DescriptionProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLDivElement> {}\n\nexport const ToastDescription = ({ textStyle = \"label.medium\", children, ...props }: ToastDescriptionProps) => (\n <InternalToastDescription asChild>\n <Text asChild consumeCss textStyle={textStyle} {...props}>\n <div>{children}</div>\n </Text>\n </InternalToastDescription>\n);\n\nconst InternalToastTitle = withContext(Toast.Title, \"title\");\n\ninterface ToastTitleProps\n extends Omit<Toast.TitleProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLDivElement> {}\n\nexport const ToastTitle = ({\n textStyle = \"label.medium\",\n fontWeight = \"semibold\",\n children,\n ...props\n}: ToastTitleProps) => (\n <InternalToastTitle asChild>\n <Text asChild consumeCss fontWeight={fontWeight} textStyle={textStyle} {...props}>\n <div>{children}</div>\n </Text>\n </InternalToastTitle>\n);\n"],"mappings":";;;;;;;;;;;;;AAyEA,MAAM,EAAE,cAAc,gBAAgB,mBA1DlB,IAAI;CACtB,OAAO,aAAa,MAAM;CAC1B,MAAM;EACJ,MAAM;GACJ,UAAU;GACV,cAAc;GACd,WAAW;GACX,UAAU;GACV,UAAU;GACV,QAAQ;GACR,SAAS;GACT,cAAc;GACd,SAAS;GACT,OAAO;GACP,WAAW;GACX,YAAY;GACZ,QAAQ;GACR,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,eAAe;IACb,YAAY;IACZ,oBAAoB;IACrB;GACF;EACD,OAAO,EACL,kBAAkB,WACnB;EACD,cAAc;GACZ,UAAU;GACV,KAAK;GACL,OAAO;GACR;EACD,aAAa,EACX,kBAAkB,WACnB;EACF;CACD,iBAAiB,EACf,SAAS,SACV;CACD,UAAU,EACR,SAAS;EACP,OAAO,EACL,MAAM;GACJ,YAAY;GACZ,OAAO;GACR,EACF;EACD,MAAM,EACJ,MAAM;GACJ,YAAY;GACZ,OAAO;GACR,EACF;EACF,EACF;CACF,CAAC,CAEmE;AAKrE,MAAa,YAAY,aAAa,MAAM,MAAM,QAAQ,EAAE,eAAe,MAAM,CAAC;AAElF,MAAa,qBAAqB,YAAY,MAAM,eAAe,iBAAiB,EAAE,eAAe,MAAM,CAAC;AAE5G,MAAa,oBAAoB,YAAY,MAAM,cAAc,gBAAgB,EAAE,eAAe,MAAM,CAAC;AAEzG,MAAM,2BAA2B,YAAY,MAAM,aAAa,cAAc;AAK9E,MAAa,oBAAoB,EAAE,YAAY,gBAAgB,UAAU,GAAG,YAC1E,oBAAC,0BAAD;CAA0B,SAAA;WACxB,oBAAC,MAAD;EAAM,SAAA;EAAQ,YAAA;EAAsB;EAAW,GAAI;YACjD,oBAAC,OAAD,EAAM,UAAe,CAAA;EAChB,CAAA;CACkB,CAAA;AAG7B,MAAM,qBAAqB,YAAY,MAAM,OAAO,QAAQ;AAK5D,MAAa,cAAc,EACzB,YAAY,gBACZ,aAAa,YACb,UACA,GAAG,YAEH,oBAAC,oBAAD;CAAoB,SAAA;WAClB,oBAAC,MAAD;EAAM,SAAA;EAAQ,YAAA;EAAuB;EAAuB;EAAW,GAAI;YACzE,oBAAC,OAAD,EAAM,UAAe,CAAA;EAChB,CAAA;CACY,CAAA"}
1
+ {"version":3,"file":"Toast.mjs","names":[],"sources":["../src/Toast.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Toast, toastAnatomy } from \"@ark-ui/react\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps, RecipeVariantProps } from \"@ndla/styled-system/types\";\nimport type { RefAttributes } from \"react\";\nimport { Text, type TextProps } from \"./Text\";\n\nconst toastRecipe = sva({\n slots: toastAnatomy.keys(),\n base: {\n root: {\n position: \"relative\",\n borderRadius: \"xsmall\",\n boxShadow: \"medium\",\n minWidth: \"20rem\",\n maxWidth: \"30rem\",\n height: \"var(--height)\",\n opacity: \"var(--opacity)\",\n overflowWrap: \"anywhere\",\n padding: \"small\",\n scale: \"var(--scale)\",\n translate: \"var(--x) var(--y) 0\",\n willChange: \"translate, scale, opacity, height\",\n zIndex: \"var(--z-index)\",\n transitionDuration: \"slow\",\n transitionProperty: \"translate, scale, opacity, height\",\n transitionTimingFunction: \"default\",\n _motionReduce: {\n transition: \"none\",\n transitionDuration: \"0s\",\n },\n },\n title: {\n paddingInlineEnd: \"xxlarge\",\n },\n closeTrigger: {\n position: \"absolute\",\n top: \"xxsmall\",\n right: \"xxsmall\",\n },\n description: {\n paddingInlineEnd: \"xxlarge\",\n },\n },\n defaultVariants: {\n variant: \"light\",\n },\n variants: {\n variant: {\n light: {\n root: {\n background: \"surface.brand.1.moderate\",\n color: \"text.default\",\n },\n },\n dark: {\n root: {\n background: \"surface.brand.1.strong\",\n color: \"text.onAction\",\n },\n },\n },\n },\n});\n\nconst { withProvider, withContext } = createStyleContext(toastRecipe);\n\nexport type ToastRootVariantProps = NonNullable<RecipeVariantProps<typeof toastRecipe>>;\n\nexport interface ToastRootProps extends Toast.RootProps, StyledProps, ToastRootVariantProps {}\nexport const ToastRoot = withProvider(Toast.Root, \"root\", { baseComponent: true });\n\nexport const ToastActionTrigger = withContext(Toast.ActionTrigger, \"actionTrigger\", { baseComponent: true });\n\nexport const ToastCloseTrigger = withContext(Toast.CloseTrigger, \"closeTrigger\", { baseComponent: true });\n\nconst InternalToastDescription = withContext(Toast.Description, \"description\");\n\ninterface ToastDescriptionProps\n extends Omit<Toast.DescriptionProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLDivElement> {}\n\nexport const ToastDescription = ({ textStyle = \"label.medium\", children, ...props }: ToastDescriptionProps) => (\n <InternalToastDescription asChild>\n <Text asChild consumeCss textStyle={textStyle} {...props}>\n <div>{children}</div>\n </Text>\n </InternalToastDescription>\n);\n\nconst InternalToastTitle = withContext(Toast.Title, \"title\");\n\ninterface ToastTitleProps\n extends Omit<Toast.TitleProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLDivElement> {}\n\nexport const ToastTitle = ({\n textStyle = \"label.medium\",\n fontWeight = \"semibold\",\n children,\n ...props\n}: ToastTitleProps) => (\n <InternalToastTitle asChild>\n <Text asChild consumeCss fontWeight={fontWeight} textStyle={textStyle} {...props}>\n <div>{children}</div>\n </Text>\n </InternalToastTitle>\n);\n"],"mappings":";;;;;;;;;;;;;AAyEA,MAAM,EAAE,cAAc,gBAAgB,mBA1DlB,IAAI;CACtB,OAAO,aAAa,KAAK;CACzB,MAAM;EACJ,MAAM;GACJ,UAAU;GACV,cAAc;GACd,WAAW;GACX,UAAU;GACV,UAAU;GACV,QAAQ;GACR,SAAS;GACT,cAAc;GACd,SAAS;GACT,OAAO;GACP,WAAW;GACX,YAAY;GACZ,QAAQ;GACR,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,eAAe;IACb,YAAY;IACZ,oBAAoB;GACtB;EACF;EACA,OAAO,EACL,kBAAkB,UACpB;EACA,cAAc;GACZ,UAAU;GACV,KAAK;GACL,OAAO;EACT;EACA,aAAa,EACX,kBAAkB,UACpB;CACF;CACA,iBAAiB,EACf,SAAS,QACX;CACA,UAAU,EACR,SAAS;EACP,OAAO,EACL,MAAM;GACJ,YAAY;GACZ,OAAO;EACT,EACF;EACA,MAAM,EACJ,MAAM;GACJ,YAAY;GACZ,OAAO;EACT,EACF;CACF,EACF;AACF,CAEmE,CAAC;AAKpE,MAAa,YAAY,aAAa,MAAM,MAAM,QAAQ,EAAE,eAAe,KAAK,CAAC;AAEjF,MAAa,qBAAqB,YAAY,MAAM,eAAe,iBAAiB,EAAE,eAAe,KAAK,CAAC;AAE3G,MAAa,oBAAoB,YAAY,MAAM,cAAc,gBAAgB,EAAE,eAAe,KAAK,CAAC;AAExG,MAAM,2BAA2B,YAAY,MAAM,aAAa,aAAa;AAK7E,MAAa,oBAAoB,EAAE,YAAY,gBAAgB,UAAU,GAAG,YAC1E,oBAAC,0BAAD;CAA0B,SAAA;WACxB,oBAAC,MAAD;EAAM,SAAA;EAAQ,YAAA;EAAsB;EAAW,GAAI;YACjD,oBAAC,OAAD,EAAM,SAAc,CAAA;CAChB,CAAA;AACkB,CAAA;AAG5B,MAAM,qBAAqB,YAAY,MAAM,OAAO,OAAO;AAK3D,MAAa,cAAc,EACzB,YAAY,gBACZ,aAAa,YACb,UACA,GAAG,YAEH,oBAAC,oBAAD;CAAoB,SAAA;WAClB,oBAAC,MAAD;EAAM,SAAA;EAAQ,YAAA;EAAuB;EAAuB;EAAW,GAAI;YACzE,oBAAC,OAAD,EAAM,SAAc,CAAA;CAChB,CAAA;AACY,CAAA"}
@@ -1 +1 @@
1
- {"version":3,"file":"ToggleGroup.mjs","names":[],"sources":["../src/ToggleGroup.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { toggleGroupAnatomy, ToggleGroup } from \"@ark-ui/react\";\nimport { type RecipeVariantProps, sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\n\nconst toggleGroupRecipe = sva({\n slots: toggleGroupAnatomy.keys(),\n base: {\n root: {\n display: \"flex\",\n flexDirection: \"row\",\n gap: \"4xsmall\",\n },\n },\n});\n\nconst { withProvider, withContext } = createStyleContext(toggleGroupRecipe);\n\nexport type ToggleGroupVariantProps = NonNullable<RecipeVariantProps<typeof toggleGroupRecipe>>;\nexport interface ToggleGroupRootProps extends ToggleGroup.RootProps, StyledProps, ToggleGroupVariantProps {}\n\nexport const ToggleGroupRoot = withProvider(ToggleGroup.Root, \"root\", { baseComponent: true });\n\nexport interface ToggleGroupItemProps extends ToggleGroup.ItemProps, StyledProps {}\n\nexport const ToggleGroupItem = withContext(ToggleGroup.Item, \"item\", { baseComponent: true });\n"],"mappings":";;;;;;;;;;;AAwBA,MAAM,EAAE,cAAc,gBAAgB,mBAXZ,IAAI;CAC5B,OAAO,mBAAmB,MAAM;CAChC,MAAM,EACJ,MAAM;EACJ,SAAS;EACT,eAAe;EACf,KAAK;EACN,EACF;CACF,CAAC,CAEyE;AAK3E,MAAa,kBAAkB,aAAa,YAAY,MAAM,QAAQ,EAAE,eAAe,MAAM,CAAC;AAI9F,MAAa,kBAAkB,YAAY,YAAY,MAAM,QAAQ,EAAE,eAAe,MAAM,CAAC"}
1
+ {"version":3,"file":"ToggleGroup.mjs","names":[],"sources":["../src/ToggleGroup.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { toggleGroupAnatomy, ToggleGroup } from \"@ark-ui/react\";\nimport { type RecipeVariantProps, sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\n\nconst toggleGroupRecipe = sva({\n slots: toggleGroupAnatomy.keys(),\n base: {\n root: {\n display: \"flex\",\n flexDirection: \"row\",\n gap: \"4xsmall\",\n },\n },\n});\n\nconst { withProvider, withContext } = createStyleContext(toggleGroupRecipe);\n\nexport type ToggleGroupVariantProps = NonNullable<RecipeVariantProps<typeof toggleGroupRecipe>>;\nexport interface ToggleGroupRootProps extends ToggleGroup.RootProps, StyledProps, ToggleGroupVariantProps {}\n\nexport const ToggleGroupRoot = withProvider(ToggleGroup.Root, \"root\", { baseComponent: true });\n\nexport interface ToggleGroupItemProps extends ToggleGroup.ItemProps, StyledProps {}\n\nexport const ToggleGroupItem = withContext(ToggleGroup.Item, \"item\", { baseComponent: true });\n"],"mappings":";;;;;;;;;;;AAwBA,MAAM,EAAE,cAAc,gBAAgB,mBAXZ,IAAI;CAC5B,OAAO,mBAAmB,KAAK;CAC/B,MAAM,EACJ,MAAM;EACJ,SAAS;EACT,eAAe;EACf,KAAK;CACP,EACF;AACF,CAEyE,CAAC;AAK1E,MAAa,kBAAkB,aAAa,YAAY,MAAM,QAAQ,EAAE,eAAe,KAAK,CAAC;AAI7F,MAAa,kBAAkB,YAAY,YAAY,MAAM,QAAQ,EAAE,eAAe,KAAK,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"Tooltip.mjs","names":[],"sources":["../src/Tooltip.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Tooltip, tooltipAnatomy } from \"@ark-ui/react\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\n\nconst tooltipRecipe = sva({\n slots: tooltipAnatomy.keys(),\n base: {\n content: {\n background: \"surface.action\",\n textStyle: \"label.small\",\n color: \"text.onAction\",\n paddingInline: \"xxsmall\",\n paddingBlock: \"4xsmall\",\n \"--arrow-size\": \"spacing.xxsmall\",\n \"--arrow-background\": \"colors.surface.action\",\n _open: {\n animation: \"fade-shift-in 0.2s ease-out\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n _closed: {\n animation: \"fade-shift-out 0.2s ease-out\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n },\n },\n});\n\nconst { withRootProvider, withContext } = createStyleContext(tooltipRecipe);\n\nexport type TooltipRootProps = Tooltip.RootProps;\nexport const TooltipRoot = withRootProvider(Tooltip.Root);\n\nexport const TooltipArrow = withContext(Tooltip.Arrow, \"arrow\", { baseComponent: true });\n\nexport const TooltipArrowTip = withContext(Tooltip.ArrowTip, \"arrowTip\", { baseComponent: true });\n\nexport const TooltipContentStandalone = withContext(Tooltip.Content, \"content\", { baseComponent: true });\n\ninterface TooltipContentProps extends Tooltip.ContentProps, StyledProps {}\n\nexport const TooltipContent = forwardRef<HTMLDivElement, TooltipContentProps>(({ children, ...props }, ref) => (\n <TooltipPositioner>\n <TooltipContentStandalone {...props} ref={ref}>\n <TooltipArrow>\n <TooltipArrowTip />\n </TooltipArrow>\n {children}\n </TooltipContentStandalone>\n </TooltipPositioner>\n));\n\nexport const TooltipPositioner = withContext(Tooltip.Positioner, \"positioner\", { baseComponent: true });\n\nexport const TooltipTrigger = withContext(Tooltip.Trigger, \"trigger\", { baseComponent: true });\n"],"mappings":";;;;;;;;;;;;;AAyCA,MAAM,EAAE,kBAAkB,gBAAgB,mBA3BpB,IAAI;CACxB,OAAO,eAAe,MAAM;CAC5B,MAAM,EACJ,SAAS;EACP,YAAY;EACZ,WAAW;EACX,OAAO;EACP,eAAe;EACf,cAAc;EACd,gBAAgB;EAChB,sBAAsB;EACtB,OAAO;GACL,WAAW;GACX,eAAe,EACb,WAAW,QACZ;GACF;EACD,SAAS;GACP,WAAW;GACX,eAAe,EACb,WAAW,QACZ;GACF;EACF,EACF;CACF,CAAC,CAEyE;AAG3E,MAAa,cAAc,iBAAiB,QAAQ,KAAK;AAEzD,MAAa,eAAe,YAAY,QAAQ,OAAO,SAAS,EAAE,eAAe,MAAM,CAAC;AAExF,MAAa,kBAAkB,YAAY,QAAQ,UAAU,YAAY,EAAE,eAAe,MAAM,CAAC;AAEjG,MAAa,2BAA2B,YAAY,QAAQ,SAAS,WAAW,EAAE,eAAe,MAAM,CAAC;AAIxG,MAAa,iBAAiB,YAAiD,EAAE,UAAU,GAAG,SAAS,QACrG,oBAAC,mBAAD,EAAA,UACE,qBAAC,0BAAD;CAA0B,GAAI;CAAY;WAA1C,CACE,oBAAC,cAAD,EAAA,UACE,oBAAC,iBAAD,EAAmB,CAAA,EACN,CAAA,EACd,SACwB;IACT,CAAA,CACpB;AAEF,MAAa,oBAAoB,YAAY,QAAQ,YAAY,cAAc,EAAE,eAAe,MAAM,CAAC;AAEvG,MAAa,iBAAiB,YAAY,QAAQ,SAAS,WAAW,EAAE,eAAe,MAAM,CAAC"}
1
+ {"version":3,"file":"Tooltip.mjs","names":[],"sources":["../src/Tooltip.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Tooltip, tooltipAnatomy } from \"@ark-ui/react\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\n\nconst tooltipRecipe = sva({\n slots: tooltipAnatomy.keys(),\n base: {\n content: {\n background: \"surface.action\",\n textStyle: \"label.small\",\n color: \"text.onAction\",\n paddingInline: \"xxsmall\",\n paddingBlock: \"4xsmall\",\n \"--arrow-size\": \"spacing.xxsmall\",\n \"--arrow-background\": \"colors.surface.action\",\n _open: {\n animation: \"fade-shift-in 0.2s ease-out\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n _closed: {\n animation: \"fade-shift-out 0.2s ease-out\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n },\n },\n});\n\nconst { withRootProvider, withContext } = createStyleContext(tooltipRecipe);\n\nexport type TooltipRootProps = Tooltip.RootProps;\nexport const TooltipRoot = withRootProvider(Tooltip.Root);\n\nexport const TooltipArrow = withContext(Tooltip.Arrow, \"arrow\", { baseComponent: true });\n\nexport const TooltipArrowTip = withContext(Tooltip.ArrowTip, \"arrowTip\", { baseComponent: true });\n\nexport const TooltipContentStandalone = withContext(Tooltip.Content, \"content\", { baseComponent: true });\n\ninterface TooltipContentProps extends Tooltip.ContentProps, StyledProps {}\n\nexport const TooltipContent = forwardRef<HTMLDivElement, TooltipContentProps>(({ children, ...props }, ref) => (\n <TooltipPositioner>\n <TooltipContentStandalone {...props} ref={ref}>\n <TooltipArrow>\n <TooltipArrowTip />\n </TooltipArrow>\n {children}\n </TooltipContentStandalone>\n </TooltipPositioner>\n));\n\nexport const TooltipPositioner = withContext(Tooltip.Positioner, \"positioner\", { baseComponent: true });\n\nexport const TooltipTrigger = withContext(Tooltip.Trigger, \"trigger\", { baseComponent: true });\n"],"mappings":";;;;;;;;;;;;;AAyCA,MAAM,EAAE,kBAAkB,gBAAgB,mBA3BpB,IAAI;CACxB,OAAO,eAAe,KAAK;CAC3B,MAAM,EACJ,SAAS;EACP,YAAY;EACZ,WAAW;EACX,OAAO;EACP,eAAe;EACf,cAAc;EACd,gBAAgB;EAChB,sBAAsB;EACtB,OAAO;GACL,WAAW;GACX,eAAe,EACb,WAAW,OACb;EACF;EACA,SAAS;GACP,WAAW;GACX,eAAe,EACb,WAAW,OACb;EACF;CACF,EACF;AACF,CAEyE,CAAC;AAG1E,MAAa,cAAc,iBAAiB,QAAQ,IAAI;AAExD,MAAa,eAAe,YAAY,QAAQ,OAAO,SAAS,EAAE,eAAe,KAAK,CAAC;AAEvF,MAAa,kBAAkB,YAAY,QAAQ,UAAU,YAAY,EAAE,eAAe,KAAK,CAAC;AAEhG,MAAa,2BAA2B,YAAY,QAAQ,SAAS,WAAW,EAAE,eAAe,KAAK,CAAC;AAIvG,MAAa,iBAAiB,YAAiD,EAAE,UAAU,GAAG,SAAS,QACrG,oBAAC,mBAAD,EAAA,UACE,qBAAC,0BAAD;CAA0B,GAAI;CAAY;WAA1C,CACE,oBAAC,cAAD,EAAA,UACE,oBAAC,iBAAD,CAAkB,CAAA,EACN,CAAA,GACb,QACuB;GACT,CAAA,CACpB;AAED,MAAa,oBAAoB,YAAY,QAAQ,YAAY,cAAc,EAAE,eAAe,KAAK,CAAC;AAEtG,MAAa,iBAAiB,YAAY,QAAQ,SAAS,WAAW,EAAE,eAAe,KAAK,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"Tree.mjs","names":["createTreeCollection","_createTreeCollection","useTreeView","_useTreeView"],"sources":["../../src/Tree/Tree.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport {\n TreeView,\n treeViewAnatomy,\n type TreeNode,\n createTreeCollection as _createTreeCollection,\n useTreeView as _useTreeView,\n} from \"@ark-ui/react\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef, type ElementType, type RefAttributes } from \"react\";\nimport { Text, type TextProps } from \"../Text\";\n\nconst treeRecipe = sva({\n slots: treeViewAnatomy.keys(),\n base: {\n root: {\n width: \"100%\",\n },\n branch: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"3xsmall\",\n },\n branchContent: {\n position: \"relative\",\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"3xsmall\",\n },\n branchControl: {\n display: \"flex\",\n alignItems: \"center\",\n gap: \"3xsmall\",\n borderRadius: \"xsmall\",\n height: \"xxlarge\",\n cursor: \"pointer\",\n paddingInlineStart: \"calc((var(--depth) - 1) * token(spacing.medium))\",\n paddingInlineEnd: \"xsmall\",\n paddingBlock: \"xsmall\",\n transitionDuration: \"normal\",\n transitionProperty: \"background, color\",\n transitionTimingFunction: \"default\",\n _hover: {\n background: \"surface.hover\",\n },\n _selected: {\n background: \"surface.selected\",\n },\n },\n branchIndicator: {\n transformOrigin: \"center\",\n transitionDuration: \"normal\",\n transitionProperty: \"transform\",\n transitionTimingFunction: \"default\",\n _open: {\n transform: \"rotate(90deg)\",\n },\n },\n item: {\n display: \"flex\",\n cursor: \"pointer\",\n position: \"relative\",\n borderRadius: \"xsmall\",\n justifyContent: \"space-between\",\n paddingBlock: \"xsmall\",\n paddingInlineEnd: \"xsmall\",\n paddingInlineStart:\n \"calc(((var(--depth) - 1) * token(spacing.medium)) + token(spacing.xxlarge) + token(spacing.3xsmall))\",\n transitionDuration: \"normal\",\n transitionProperty: \"background, color\",\n transitionTimingFunction: \"default\",\n height: \"xxlarge\",\n alignItems: \"center\",\n\n _hover: {\n background: \"surface.hover\",\n },\n _selected: {\n background: \"surface.selected\",\n _hover: {\n background: \"surface.hover\",\n },\n },\n },\n itemIndicator: {\n color: \"icon.strong\",\n },\n itemText: {\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n },\n branchText: {\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n },\n tree: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"3xsmall\",\n },\n },\n});\n\nconst { withProvider, withContext } = createStyleContext(treeRecipe);\n\nexport interface TreeRootProps<T extends TreeNode = TreeNode>\n extends TreeView.RootProps<T>, StyledProps, RefAttributes<HTMLDivElement> {}\n\nconst InternalTreeRoot = withProvider<ElementType<TreeRootProps>>(TreeView.Root, \"root\", { baseComponent: true });\n\nexport const TreeRoot = <T extends TreeNode = TreeNode>(props: TreeRootProps<T>) => <InternalTreeRoot {...props} />;\n\nexport interface TreeRootProviderProps<T extends TreeNode = TreeNode>\n extends TreeView.RootProviderProps<T>, StyledProps {}\n\nconst InternalTreeRootProvider = withProvider<ElementType<TreeRootProviderProps>>(TreeView.RootProvider, \"root\", {\n baseComponent: true,\n});\n\nexport const TreeRootProvider = <T extends TreeNode = TreeNode>(props: TreeRootProviderProps<T>) => (\n <InternalTreeRootProvider {...props} />\n);\n\nexport const TreeBranchContent = withContext(TreeView.BranchContent, \"branchContent\", { baseComponent: true });\n\nexport const TreeBranchControl = withContext(TreeView.BranchControl, \"branchControl\", { baseComponent: true });\n\nexport const TreeBranchIndicator = withContext(TreeView.BranchIndicator, \"branchIndicator\", { baseComponent: true });\n\nexport const TreeBranch = withContext(TreeView.Branch, \"branch\", {\n baseComponent: true,\n});\n\nconst InternalTreeBranchText = withContext(TreeView.BranchText, \"branchText\", { baseComponent: true });\n\ninterface TreeBranchTextProps\n extends Omit<TreeView.BranchTextProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLDivElement> {}\n\nexport const TreeBranchText = forwardRef<HTMLDivElement, TreeBranchTextProps>(\n ({ textStyle = \"label.medium\", fontWeight = \"bold\", children, ...props }, ref) => (\n <InternalTreeBranchText asChild {...props} ref={ref}>\n <Text textStyle={textStyle} fontWeight={fontWeight} asChild consumeCss>\n <div>{children}</div>\n </Text>\n </InternalTreeBranchText>\n ),\n);\n\nexport const TreeBranchTrigger = withContext(TreeView.BranchTrigger, \"branchTrigger\", { baseComponent: true });\n\nexport const TreeItemIndicator = withContext(TreeView.ItemIndicator, \"itemIndicator\", { baseComponent: true });\n\nexport const TreeItem = withContext(TreeView.Item, \"item\", { baseComponent: true });\n\nconst InternalTreeItemText = withContext(TreeView.ItemText, \"itemText\", { baseComponent: true });\n\ninterface TreeItemTextProps\n extends Omit<TreeView.ItemTextProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLDivElement> {}\n\nexport const TreeItemText = forwardRef<HTMLDivElement, TreeItemTextProps>(\n ({ textStyle = \"label.medium\", fontWeight = \"bold\", children, ...props }, ref) => (\n <InternalTreeItemText asChild {...props} ref={ref}>\n <Text textStyle={textStyle} fontWeight={fontWeight} asChild consumeCss>\n <div>{children}</div>\n </Text>\n </InternalTreeItemText>\n ),\n);\n\nconst InternalTreeLabel = withContext(TreeView.Label, \"label\", { baseComponent: true });\n\ninterface TreeLabelProps\n extends Omit<TreeView.LabelProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLDivElement> {}\n\nexport const TreeLabel = forwardRef<HTMLDivElement, TreeLabelProps>(\n ({ children, textStyle = \"label.medium\", fontWeight = \"bold\", ...props }, ref) => (\n <InternalTreeLabel asChild {...props} ref={ref}>\n <Text textStyle={textStyle} fontWeight={fontWeight} asChild consumeCss>\n <div>{children}</div>\n </Text>\n </InternalTreeLabel>\n ),\n);\n\nexport const Tree = withContext(TreeView.Tree, \"tree\", { baseComponent: true });\n\nexport const createTreeCollection = _createTreeCollection;\n\nexport const TreeNodeProvider = TreeView.NodeProvider;\nexport const TreeNodeContext = TreeView.NodeContext;\nexport const useTreeView = _useTreeView;\n"],"mappings":"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"}
1
+ {"version":3,"file":"Tree.mjs","names":["createTreeCollection","_createTreeCollection","useTreeView","_useTreeView"],"sources":["../../src/Tree/Tree.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport {\n TreeView,\n treeViewAnatomy,\n type TreeNode,\n createTreeCollection as _createTreeCollection,\n useTreeView as _useTreeView,\n} from \"@ark-ui/react\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef, type ElementType, type RefAttributes } from \"react\";\nimport { Text, type TextProps } from \"../Text\";\n\nconst treeRecipe = sva({\n slots: treeViewAnatomy.keys(),\n base: {\n root: {\n width: \"100%\",\n },\n branch: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"3xsmall\",\n },\n branchContent: {\n position: \"relative\",\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"3xsmall\",\n },\n branchControl: {\n display: \"flex\",\n alignItems: \"center\",\n gap: \"3xsmall\",\n borderRadius: \"xsmall\",\n height: \"xxlarge\",\n cursor: \"pointer\",\n paddingInlineStart: \"calc((var(--depth) - 1) * token(spacing.medium))\",\n paddingInlineEnd: \"xsmall\",\n paddingBlock: \"xsmall\",\n transitionDuration: \"normal\",\n transitionProperty: \"background, color\",\n transitionTimingFunction: \"default\",\n _hover: {\n background: \"surface.hover\",\n },\n _selected: {\n background: \"surface.selected\",\n },\n },\n branchIndicator: {\n transformOrigin: \"center\",\n transitionDuration: \"normal\",\n transitionProperty: \"transform\",\n transitionTimingFunction: \"default\",\n _open: {\n transform: \"rotate(90deg)\",\n },\n },\n item: {\n display: \"flex\",\n cursor: \"pointer\",\n position: \"relative\",\n borderRadius: \"xsmall\",\n justifyContent: \"space-between\",\n paddingBlock: \"xsmall\",\n paddingInlineEnd: \"xsmall\",\n paddingInlineStart:\n \"calc(((var(--depth) - 1) * token(spacing.medium)) + token(spacing.xxlarge) + token(spacing.3xsmall))\",\n transitionDuration: \"normal\",\n transitionProperty: \"background, color\",\n transitionTimingFunction: \"default\",\n height: \"xxlarge\",\n alignItems: \"center\",\n\n _hover: {\n background: \"surface.hover\",\n },\n _selected: {\n background: \"surface.selected\",\n _hover: {\n background: \"surface.hover\",\n },\n },\n },\n itemIndicator: {\n color: \"icon.strong\",\n },\n itemText: {\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n },\n branchText: {\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n },\n tree: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"3xsmall\",\n },\n },\n});\n\nconst { withProvider, withContext } = createStyleContext(treeRecipe);\n\nexport interface TreeRootProps<T extends TreeNode = TreeNode>\n extends TreeView.RootProps<T>, StyledProps, RefAttributes<HTMLDivElement> {}\n\nconst InternalTreeRoot = withProvider<ElementType<TreeRootProps>>(TreeView.Root, \"root\", { baseComponent: true });\n\nexport const TreeRoot = <T extends TreeNode = TreeNode>(props: TreeRootProps<T>) => <InternalTreeRoot {...props} />;\n\nexport interface TreeRootProviderProps<T extends TreeNode = TreeNode>\n extends TreeView.RootProviderProps<T>, StyledProps {}\n\nconst InternalTreeRootProvider = withProvider<ElementType<TreeRootProviderProps>>(TreeView.RootProvider, \"root\", {\n baseComponent: true,\n});\n\nexport const TreeRootProvider = <T extends TreeNode = TreeNode>(props: TreeRootProviderProps<T>) => (\n <InternalTreeRootProvider {...props} />\n);\n\nexport const TreeBranchContent = withContext(TreeView.BranchContent, \"branchContent\", { baseComponent: true });\n\nexport const TreeBranchControl = withContext(TreeView.BranchControl, \"branchControl\", { baseComponent: true });\n\nexport const TreeBranchIndicator = withContext(TreeView.BranchIndicator, \"branchIndicator\", { baseComponent: true });\n\nexport const TreeBranch = withContext(TreeView.Branch, \"branch\", {\n baseComponent: true,\n});\n\nconst InternalTreeBranchText = withContext(TreeView.BranchText, \"branchText\", { baseComponent: true });\n\ninterface TreeBranchTextProps\n extends Omit<TreeView.BranchTextProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLDivElement> {}\n\nexport const TreeBranchText = forwardRef<HTMLDivElement, TreeBranchTextProps>(\n ({ textStyle = \"label.medium\", fontWeight = \"bold\", children, ...props }, ref) => (\n <InternalTreeBranchText asChild {...props} ref={ref}>\n <Text textStyle={textStyle} fontWeight={fontWeight} asChild consumeCss>\n <div>{children}</div>\n </Text>\n </InternalTreeBranchText>\n ),\n);\n\nexport const TreeBranchTrigger = withContext(TreeView.BranchTrigger, \"branchTrigger\", { baseComponent: true });\n\nexport const TreeItemIndicator = withContext(TreeView.ItemIndicator, \"itemIndicator\", { baseComponent: true });\n\nexport const TreeItem = withContext(TreeView.Item, \"item\", { baseComponent: true });\n\nconst InternalTreeItemText = withContext(TreeView.ItemText, \"itemText\", { baseComponent: true });\n\ninterface TreeItemTextProps\n extends Omit<TreeView.ItemTextProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLDivElement> {}\n\nexport const TreeItemText = forwardRef<HTMLDivElement, TreeItemTextProps>(\n ({ textStyle = \"label.medium\", fontWeight = \"bold\", children, ...props }, ref) => (\n <InternalTreeItemText asChild {...props} ref={ref}>\n <Text textStyle={textStyle} fontWeight={fontWeight} asChild consumeCss>\n <div>{children}</div>\n </Text>\n </InternalTreeItemText>\n ),\n);\n\nconst InternalTreeLabel = withContext(TreeView.Label, \"label\", { baseComponent: true });\n\ninterface TreeLabelProps\n extends Omit<TreeView.LabelProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLDivElement> {}\n\nexport const TreeLabel = forwardRef<HTMLDivElement, TreeLabelProps>(\n ({ children, textStyle = \"label.medium\", fontWeight = \"bold\", ...props }, ref) => (\n <InternalTreeLabel asChild {...props} ref={ref}>\n <Text textStyle={textStyle} fontWeight={fontWeight} asChild consumeCss>\n <div>{children}</div>\n </Text>\n </InternalTreeLabel>\n ),\n);\n\nexport const Tree = withContext(TreeView.Tree, \"tree\", { baseComponent: true });\n\nexport const createTreeCollection = _createTreeCollection;\n\nexport const TreeNodeProvider = TreeView.NodeProvider;\nexport const TreeNodeContext = TreeView.NodeContext;\nexport const useTreeView = _useTreeView;\n"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"Accordion.js","names":["accordionAnatomy","Accordion"],"sources":["../src/Accordion.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Accordion, accordionAnatomy } from \"@ark-ui/react\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { RecipeVariantProps, StyledProps } from \"@ndla/styled-system/types\";\nimport type { RefAttributes } from \"react\";\n\nconst accordionRecipe = sva({\n slots: accordionAnatomy.keys(),\n base: {\n root: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"3xsmall\",\n },\n itemTrigger: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n background: \"surface.default\",\n cursor: \"pointer\",\n transitionDuration: \"fast\",\n transitionTimingFunction: \"default\",\n transitionProperty: \"background, border-color, border, border-radius\",\n _closed: {\n transitionProperty: \"background, border-color, border, border-radius\",\n },\n _disabled: {\n cursor: \"not-allowed\",\n background: \"surface.disabled.subtle\",\n boxShadowColor: \"stroke.disabled\",\n color: \"text.disabled\",\n _hover: {\n background: \"surface.disabled.subtle\",\n boxShadowColor: \"stroke.disabled\",\n color: \"text.disabled\",\n },\n },\n },\n itemIndicator: {\n color: \"icon.strong\",\n transformOrigin: \"center\",\n transitionDuration: \"normal\",\n transitionProperty: \"transform\",\n transitionTimingFunction: \"default\",\n _open: {\n transform: \"rotate(180deg)\",\n },\n _motionReduce: {\n transition: \"none\",\n transitionDuration: \"0s\",\n },\n },\n itemContent: {\n overflow: \"hidden\",\n // TODO: Is this needed?\n transitionProperty: \"padding-bottom\",\n transitionDuration: \"normal\",\n transitionTimingFunction: \"default\",\n paddingBlock: \"xsmall\",\n paddingInline: \"small\",\n _open: {\n animation: \"collapse-in\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n _closed: {\n animation: \"collapse-out\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n },\n item: {\n width: \"100%\",\n },\n },\n defaultVariants: {\n variant: \"bordered\",\n },\n variants: {\n variant: {\n clean: {},\n bordered: {\n itemTrigger: {\n paddingInline: \"medium\",\n paddingBlock: \"medium\",\n width: \"100%\",\n borderRadius: \"xsmall\",\n boxShadowColor: \"stroke.subtle\",\n boxShadow: \"inset 0 0 0 1px var(--shadow-color)\",\n _hover: {\n background: \"surface.actionSubtle.hover\",\n boxShadowColor: \"stroke.hover\",\n },\n _open: {\n background: \"surface.actionSubtle.active\",\n boxShadowColor: \"stroke.default\",\n borderBottomRadius: \"sharp\",\n },\n _focusVisible: {\n outline: \"none\",\n boxShadowColor: \"stroke.default\",\n boxShadow: \"inset 0 0 0 3px var(--shadow-color)\",\n },\n },\n itemContent: {\n borderBottomRadius: \"xsmall\",\n borderWidth: \"0 1px 1px\",\n borderStyle: \"solid\",\n borderColor: \"stroke.default\",\n },\n },\n },\n },\n});\n\nconst { withProvider, withContext } = createStyleContext(accordionRecipe);\n\nexport type AccordionVariantProps = NonNullable<RecipeVariantProps<typeof accordionRecipe>>;\n\nexport interface AccordionRootProps\n extends StyledProps, Accordion.RootProps, RefAttributes<HTMLDivElement>, AccordionVariantProps {}\n\nexport const InternalAccordionRoot = withProvider(Accordion.Root, \"root\", { baseComponent: true });\n\nexport const AccordionRoot = ({ lazyMount = true, unmountOnExit = true, ...props }: AccordionRootProps) => (\n <InternalAccordionRoot lazyMount={lazyMount} unmountOnExit={unmountOnExit} {...props} />\n);\n\nexport const AccordionItemContent = withContext(Accordion.ItemContent, \"itemContent\", { baseComponent: true });\n\nexport const AccordionItemIndicator = withContext(Accordion.ItemIndicator, \"itemIndicator\", { baseComponent: true });\n\nexport interface AccordionItemProps extends StyledProps, Accordion.ItemProps {}\n\nexport const AccordionItem = withContext(Accordion.Item, \"item\", { baseComponent: true });\n\nexport const AccordionItemTrigger = withContext(Accordion.ItemTrigger, \"itemTrigger\", { baseComponent: true });\n"],"mappings":";;;;;;;;;;;;AA6HA,MAAM,EAAE,cAAc,iBAAA,GAAA,wBAAA,qBAAA,GAAA,wBAAA,KA/GM;CAC1B,OAAOA,cAAAA,iBAAiB,MAAM;CAC9B,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,eAAe;GACf,KAAK;GACN;EACD,aAAa;GACX,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,YAAY;GACZ,QAAQ;GACR,oBAAoB;GACpB,0BAA0B;GAC1B,oBAAoB;GACpB,SAAS,EACP,oBAAoB,mDACrB;GACD,WAAW;IACT,QAAQ;IACR,YAAY;IACZ,gBAAgB;IAChB,OAAO;IACP,QAAQ;KACN,YAAY;KACZ,gBAAgB;KAChB,OAAO;KACR;IACF;GACF;EACD,eAAe;GACb,OAAO;GACP,iBAAiB;GACjB,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,OAAO,EACL,WAAW,kBACZ;GACD,eAAe;IACb,YAAY;IACZ,oBAAoB;IACrB;GACF;EACD,aAAa;GACX,UAAU;GAEV,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,cAAc;GACd,eAAe;GACf,OAAO;IACL,WAAW;IACX,eAAe,EACb,WAAW,QACZ;IACF;GACD,SAAS;IACP,WAAW;IACX,eAAe,EACb,WAAW,QACZ;IACF;GACF;EACD,MAAM,EACJ,OAAO,QACR;EACF;CACD,iBAAiB,EACf,SAAS,YACV;CACD,UAAU,EACR,SAAS;EACP,OAAO,EAAE;EACT,UAAU;GACR,aAAa;IACX,eAAe;IACf,cAAc;IACd,OAAO;IACP,cAAc;IACd,gBAAgB;IAChB,WAAW;IACX,QAAQ;KACN,YAAY;KACZ,gBAAgB;KACjB;IACD,OAAO;KACL,YAAY;KACZ,gBAAgB;KAChB,oBAAoB;KACrB;IACD,eAAe;KACb,SAAS;KACT,gBAAgB;KAChB,WAAW;KACZ;IACF;GACD,aAAa;IACX,oBAAoB;IACpB,aAAa;IACb,aAAa;IACb,aAAa;IACd;GACF;EACF,EACF;CACF,CAAC,CAEuE;AAOzE,MAAa,wBAAwB,aAAaC,cAAAA,UAAU,MAAM,QAAQ,EAAE,eAAe,MAAM,CAAC;AAElG,MAAa,iBAAiB,EAAE,YAAY,MAAM,gBAAgB,MAAM,GAAG,YACzE,iBAAA,GAAA,kBAAA,KAAC,uBAAD;CAAkC;CAA0B;CAAe,GAAI;CAAS,CAAA;AAG1F,MAAa,uBAAuB,YAAYA,cAAAA,UAAU,aAAa,eAAe,EAAE,eAAe,MAAM,CAAC;AAE9G,MAAa,yBAAyB,YAAYA,cAAAA,UAAU,eAAe,iBAAiB,EAAE,eAAe,MAAM,CAAC;AAIpH,MAAa,gBAAgB,YAAYA,cAAAA,UAAU,MAAM,QAAQ,EAAE,eAAe,MAAM,CAAC;AAEzF,MAAa,uBAAuB,YAAYA,cAAAA,UAAU,aAAa,eAAe,EAAE,eAAe,MAAM,CAAC"}
1
+ {"version":3,"file":"Accordion.js","names":["accordionAnatomy","Accordion"],"sources":["../src/Accordion.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Accordion, accordionAnatomy } from \"@ark-ui/react\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { RecipeVariantProps, StyledProps } from \"@ndla/styled-system/types\";\nimport type { RefAttributes } from \"react\";\n\nconst accordionRecipe = sva({\n slots: accordionAnatomy.keys(),\n base: {\n root: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"3xsmall\",\n },\n itemTrigger: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n background: \"surface.default\",\n cursor: \"pointer\",\n transitionDuration: \"fast\",\n transitionTimingFunction: \"default\",\n transitionProperty: \"background, border-color, border, border-radius\",\n _closed: {\n transitionProperty: \"background, border-color, border, border-radius\",\n },\n _disabled: {\n cursor: \"not-allowed\",\n background: \"surface.disabled.subtle\",\n boxShadowColor: \"stroke.disabled\",\n color: \"text.disabled\",\n _hover: {\n background: \"surface.disabled.subtle\",\n boxShadowColor: \"stroke.disabled\",\n color: \"text.disabled\",\n },\n },\n },\n itemIndicator: {\n color: \"icon.strong\",\n transformOrigin: \"center\",\n transitionDuration: \"normal\",\n transitionProperty: \"transform\",\n transitionTimingFunction: \"default\",\n _open: {\n transform: \"rotate(180deg)\",\n },\n _motionReduce: {\n transition: \"none\",\n transitionDuration: \"0s\",\n },\n },\n itemContent: {\n overflow: \"hidden\",\n // TODO: Is this needed?\n transitionProperty: \"padding-bottom\",\n transitionDuration: \"normal\",\n transitionTimingFunction: \"default\",\n paddingBlock: \"xsmall\",\n paddingInline: \"small\",\n _open: {\n animation: \"collapse-in\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n _closed: {\n animation: \"collapse-out\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n },\n item: {\n width: \"100%\",\n },\n },\n defaultVariants: {\n variant: \"bordered\",\n },\n variants: {\n variant: {\n clean: {},\n bordered: {\n itemTrigger: {\n paddingInline: \"medium\",\n paddingBlock: \"medium\",\n width: \"100%\",\n borderRadius: \"xsmall\",\n boxShadowColor: \"stroke.subtle\",\n boxShadow: \"inset 0 0 0 1px var(--shadow-color)\",\n _hover: {\n background: \"surface.actionSubtle.hover\",\n boxShadowColor: \"stroke.hover\",\n },\n _open: {\n background: \"surface.actionSubtle.active\",\n boxShadowColor: \"stroke.default\",\n borderBottomRadius: \"sharp\",\n },\n _focusVisible: {\n outline: \"none\",\n boxShadowColor: \"stroke.default\",\n boxShadow: \"inset 0 0 0 3px var(--shadow-color)\",\n },\n },\n itemContent: {\n borderBottomRadius: \"xsmall\",\n borderWidth: \"0 1px 1px\",\n borderStyle: \"solid\",\n borderColor: \"stroke.default\",\n },\n },\n },\n },\n});\n\nconst { withProvider, withContext } = createStyleContext(accordionRecipe);\n\nexport type AccordionVariantProps = NonNullable<RecipeVariantProps<typeof accordionRecipe>>;\n\nexport interface AccordionRootProps\n extends StyledProps, Accordion.RootProps, RefAttributes<HTMLDivElement>, AccordionVariantProps {}\n\nexport const InternalAccordionRoot = withProvider(Accordion.Root, \"root\", { baseComponent: true });\n\nexport const AccordionRoot = ({ lazyMount = true, unmountOnExit = true, ...props }: AccordionRootProps) => (\n <InternalAccordionRoot lazyMount={lazyMount} unmountOnExit={unmountOnExit} {...props} />\n);\n\nexport const AccordionItemContent = withContext(Accordion.ItemContent, \"itemContent\", { baseComponent: true });\n\nexport const AccordionItemIndicator = withContext(Accordion.ItemIndicator, \"itemIndicator\", { baseComponent: true });\n\nexport interface AccordionItemProps extends StyledProps, Accordion.ItemProps {}\n\nexport const AccordionItem = withContext(Accordion.Item, \"item\", { baseComponent: true });\n\nexport const AccordionItemTrigger = withContext(Accordion.ItemTrigger, \"itemTrigger\", { baseComponent: true });\n"],"mappings":";;;;;;;;;;;;AA6HA,MAAM,EAAE,cAAc,iBAAA,GAAA,wBAAA,qBAAA,GAAA,wBAAA,KA/GM;CAC1B,OAAOA,cAAAA,iBAAiB,KAAK;CAC7B,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,eAAe;GACf,KAAK;EACP;EACA,aAAa;GACX,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,YAAY;GACZ,QAAQ;GACR,oBAAoB;GACpB,0BAA0B;GAC1B,oBAAoB;GACpB,SAAS,EACP,oBAAoB,kDACtB;GACA,WAAW;IACT,QAAQ;IACR,YAAY;IACZ,gBAAgB;IAChB,OAAO;IACP,QAAQ;KACN,YAAY;KACZ,gBAAgB;KAChB,OAAO;IACT;GACF;EACF;EACA,eAAe;GACb,OAAO;GACP,iBAAiB;GACjB,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,OAAO,EACL,WAAW,iBACb;GACA,eAAe;IACb,YAAY;IACZ,oBAAoB;GACtB;EACF;EACA,aAAa;GACX,UAAU;GAEV,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,cAAc;GACd,eAAe;GACf,OAAO;IACL,WAAW;IACX,eAAe,EACb,WAAW,OACb;GACF;GACA,SAAS;IACP,WAAW;IACX,eAAe,EACb,WAAW,OACb;GACF;EACF;EACA,MAAM,EACJ,OAAO,OACT;CACF;CACA,iBAAiB,EACf,SAAS,WACX;CACA,UAAU,EACR,SAAS;EACP,OAAO,CAAC;EACR,UAAU;GACR,aAAa;IACX,eAAe;IACf,cAAc;IACd,OAAO;IACP,cAAc;IACd,gBAAgB;IAChB,WAAW;IACX,QAAQ;KACN,YAAY;KACZ,gBAAgB;IAClB;IACA,OAAO;KACL,YAAY;KACZ,gBAAgB;KAChB,oBAAoB;IACtB;IACA,eAAe;KACb,SAAS;KACT,gBAAgB;KAChB,WAAW;IACb;GACF;GACA,aAAa;IACX,oBAAoB;IACpB,aAAa;IACb,aAAa;IACb,aAAa;GACf;EACF;CACF,EACF;AACF,CAEuE,CAAC;AAOxE,MAAa,wBAAwB,aAAaC,cAAAA,UAAU,MAAM,QAAQ,EAAE,eAAe,KAAK,CAAC;AAEjG,MAAa,iBAAiB,EAAE,YAAY,MAAM,gBAAgB,MAAM,GAAG,YACzE,iBAAA,GAAA,kBAAA,KAAC,uBAAD;CAAkC;CAA0B;CAAe,GAAI;AAAQ,CAAA;AAGzF,MAAa,uBAAuB,YAAYA,cAAAA,UAAU,aAAa,eAAe,EAAE,eAAe,KAAK,CAAC;AAE7G,MAAa,yBAAyB,YAAYA,cAAAA,UAAU,eAAe,iBAAiB,EAAE,eAAe,KAAK,CAAC;AAInH,MAAa,gBAAgB,YAAYA,cAAAA,UAAU,MAAM,QAAQ,EAAE,eAAe,KAAK,CAAC;AAExF,MAAa,uBAAuB,YAAYA,cAAAA,UAAU,aAAa,eAAe,EAAE,eAAe,KAAK,CAAC"}
@@ -26,6 +26,13 @@ const orderedListRecipe = (0, _ndla_styled_system_css.cva)({
26
26
  defaultVariants: { variant: "numbers" },
27
27
  variants: { variant: {
28
28
  numbers: {
29
+ /** We utilize a CSS variable for the counter name to correctly reset counters when nested inside a letter list.
30
+ * This way, the nested number list won't pick up on any other counters named "numbers" higher up in the DOM tree.
31
+ * This fixes the following scenario
32
+ * ol (numbers) -> 1.
33
+ * ol(letters) -> A.
34
+ * ol (numbers) -> 1. (Without the CSS variable, this would be 1.1)
35
+ */
29
36
  counterReset: "var(--counter-name) var(--start, 0)",
30
37
  "& > li": {
31
38
  counterIncrement: "var(--counter-name)",
@@ -1 +1 @@
1
- {"version":3,"file":"ArticleLists.js","names":["ark","css"],"sources":["../src/ArticleLists.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { css, cva } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { HTMLStyledProps, RecipeVariantProps, StyledProps } from \"@ndla/styled-system/types\";\nimport { createContext, type CSSProperties, forwardRef, useContext, useId, useMemo } from \"react\";\n\nconst orderedListRecipe = cva({\n base: {\n paddingInlineStart: \"large\",\n \"& > li\": {\n marginBlock: \"small\",\n _before: {\n position: \"absolute\",\n transform: \"translateX(calc(-100% - token(spacing.small)))\",\n fontVariantNumeric: \"tabular-nums\",\n },\n },\n },\n defaultVariants: {\n variant: \"numbers\",\n },\n variants: {\n variant: {\n numbers: {\n /** We utilize a CSS variable for the counter name to correctly reset counters when nested inside a letter list.\n * This way, the nested number list won't pick up on any other counters named \"numbers\" higher up in the DOM tree.\n * This fixes the following scenario\n * ol (numbers) -> 1.\n * ol(letters) -> A.\n * ol (numbers) -> 1. (Without the CSS variable, this would be 1.1)\n */\n counterReset: \"var(--counter-name) var(--start, 0)\",\n \"& > li\": {\n counterIncrement: \"var(--counter-name)\",\n _before: {\n content: `counters(var(--counter-name), \".\") \". \"`,\n },\n // If a nested OL is not a letters variant, it's a numbers variant. Keep increasing the margin to account for wider numbers.\n \"& > ol:not([data-variant='letters']) > li\": {\n paddingInlineStart: \"small\",\n \"& > ol:not([data-variant='letters']) > li\": {\n paddingInlineStart: \"large\",\n \"& > ol:not([data-variant='letters']) > li\": {\n paddingInlineStart: \"xxlarge\",\n },\n },\n },\n },\n },\n letters: {\n counterReset: \"letters var(--start, 0)\",\n \"& > li\": {\n counterIncrement: \"letters\",\n _before: {\n content: `counter(letters, upper-alpha) \". \"`,\n },\n \"& > ol[data-variant='letters'] > li\": {\n _before: {\n content: `counter(letters, lower-alpha) \". \"`,\n },\n \"& > ol[data-variant='letters'] > li\": {\n _before: {\n content: `counter(letters, lower-roman) \". \"`,\n },\n },\n },\n },\n },\n },\n },\n});\n\nexport type OrderedListVariantProps = NonNullable<RecipeVariantProps<typeof orderedListRecipe>>;\n\nexport interface OrderedListProps extends StyledProps, HTMLArkProps<\"ol\">, OrderedListVariantProps {}\n\nconst StyledOrderedList = styled(ark.ol, {}, { baseComponent: true });\n\nconst ListContext = createContext<\"numbers\" | \"letters\" | undefined>(undefined);\n\nconst useCurrentListContext = () => {\n const ctx = useContext(ListContext);\n return ctx;\n};\n\nexport const OrderedList = forwardRef<HTMLOListElement, OrderedListProps>(\n ({ variant = \"numbers\", css: cssProp, start, ...props }, ref) => {\n const counterId = useId();\n const currentContext = useCurrentListContext();\n\n const style = useMemo(() => {\n const css: Record<string, any> = { \"--start\": start ? start - 1 : 0 };\n if (variant !== currentContext) {\n css[\"--counter-name\"] = counterId;\n }\n return css as CSSProperties;\n }, [start, variant, currentContext, counterId]);\n\n return (\n <ListContext.Provider value={variant ?? \"numbers\"}>\n <StyledOrderedList\n data-embed-type=\"ordered-list\"\n data-variant={variant}\n start={start}\n type={variant === \"letters\" ? \"A\" : undefined}\n css={css.raw(orderedListRecipe.raw({ variant }), cssProp)}\n style={style}\n ref={ref}\n {...props}\n />\n </ListContext.Provider>\n );\n },\n);\n\nexport interface UnOrderedListProps extends StyledProps, HTMLArkProps<\"ul\"> {}\n\nexport const StyledUnOrderedList = styled(\"ul\", {\n base: {\n listStyle: \"revert\",\n marginInlineStart: \"medium\",\n paddingInlineStart: \"small\",\n \"& ul\": {\n marginInlineStart: \"0\",\n },\n \"& li\": {\n marginBlock: \"small\",\n paddingInlineStart: \"small\",\n _marker: {\n color: \"icon.strong\",\n },\n\n \"& > ol\": {\n marginInlineStart: \"0 !important\",\n },\n },\n\n listStyleType: \"disc\",\n \"& > li > ul\": {\n listStyleType: \"circle\",\n \"& > li > ul\": {\n listStyleType: \"square\",\n },\n },\n },\n});\n\nexport const UnOrderedList = forwardRef<HTMLUListElement, UnOrderedListProps>((props, ref) => {\n const counterId = useId();\n\n const style = useMemo(\n () =>\n ({\n \"--counter-name\": counterId,\n }) as CSSProperties,\n [counterId],\n );\n\n return <StyledUnOrderedList ref={ref} style={style} {...props} />;\n});\n\nexport const DefinitionList = styled(\"dl\", {\n base: {\n \"& dt\": {\n fontWeight: \"bold\",\n },\n \"& dd\": {\n marginInlineStart: \"medium\",\n },\n },\n});\n\nexport type DefinitionListProps = HTMLStyledProps<\"dl\">;\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,qBAAA,GAAA,wBAAA,KAAwB;CAC5B,MAAM;EACJ,oBAAoB;EACpB,UAAU;GACR,aAAa;GACb,SAAS;IACP,UAAU;IACV,WAAW;IACX,oBAAoB;IACrB;GACF;EACF;CACD,iBAAiB,EACf,SAAS,WACV;CACD,UAAU,EACR,SAAS;EACP,SAAS;GAQP,cAAc;GACd,UAAU;IACR,kBAAkB;IAClB,SAAS,EACP,SAAS,2CACV;IAED,6CAA6C;KAC3C,oBAAoB;KACpB,6CAA6C;MAC3C,oBAAoB;MACpB,6CAA6C,EAC3C,oBAAoB,WACrB;MACF;KACF;IACF;GACF;EACD,SAAS;GACP,cAAc;GACd,UAAU;IACR,kBAAkB;IAClB,SAAS,EACP,SAAS,sCACV;IACD,uCAAuC;KACrC,SAAS,EACP,SAAS,sCACV;KACD,uCAAuC,EACrC,SAAS,EACP,SAAS,sCACV,EACF;KACF;IACF;GACF;EACF,EACF;CACF,CAAC;AAMF,MAAM,qBAAA,GAAA,wBAAA,QAA2BA,cAAAA,IAAI,IAAI,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAErE,MAAM,eAAA,GAAA,MAAA,eAA+D,KAAA,EAAU;AAE/E,MAAM,8BAA8B;AAElC,SAAA,GAAA,MAAA,YADuB,YAAY;;AAIrC,MAAa,eAAA,GAAA,MAAA,aACV,EAAE,UAAU,WAAW,KAAK,SAAS,OAAO,GAAG,SAAS,QAAQ;CAC/D,MAAM,aAAA,GAAA,MAAA,QAAmB;CACzB,MAAM,iBAAiB,uBAAuB;CAE9C,MAAM,SAAA,GAAA,MAAA,eAAsB;EAC1B,MAAM,MAA2B,EAAE,WAAW,QAAQ,QAAQ,IAAI,GAAG;AACrE,MAAI,YAAY,eACd,KAAI,oBAAoB;AAE1B,SAAO;IACN;EAAC;EAAO;EAAS;EAAgB;EAAU,CAAC;AAE/C,QACE,iBAAA,GAAA,kBAAA,KAAC,YAAY,UAAb;EAAsB,OAAO,WAAW;YACtC,iBAAA,GAAA,kBAAA,KAAC,mBAAD;GACE,mBAAgB;GAChB,gBAAc;GACP;GACP,MAAM,YAAY,YAAY,MAAM,KAAA;GACpC,KAAKC,wBAAAA,IAAI,IAAI,kBAAkB,IAAI,EAAE,SAAS,CAAC,EAAE,QAAQ;GAClD;GACF;GACL,GAAI;GACJ,CAAA;EACmB,CAAA;EAG5B;AAID,MAAa,uBAAA,GAAA,wBAAA,QAA6B,MAAM,EAC9C,MAAM;CACJ,WAAW;CACX,mBAAmB;CACnB,oBAAoB;CACpB,QAAQ,EACN,mBAAmB,KACpB;CACD,QAAQ;EACN,aAAa;EACb,oBAAoB;EACpB,SAAS,EACP,OAAO,eACR;EAED,UAAU,EACR,mBAAmB,gBACpB;EACF;CAED,eAAe;CACf,eAAe;EACb,eAAe;EACf,eAAe,EACb,eAAe,UAChB;EACF;CACF,EACF,CAAC;AAEF,MAAa,iBAAA,GAAA,MAAA,aAAkE,OAAO,QAAQ;CAC5F,MAAM,aAAA,GAAA,MAAA,QAAmB;AAUzB,QAAO,iBAAA,GAAA,kBAAA,KAAC,qBAAD;EAA0B;EAAK,QAAA,GAAA,MAAA,gBANjC,EACC,kBAAkB,WACnB,GACH,CAAC,UAAU,CACZ;EAEmD,GAAI;EAAS,CAAA;EACjE;AAEF,MAAa,kBAAA,GAAA,wBAAA,QAAwB,MAAM,EACzC,MAAM;CACJ,QAAQ,EACN,YAAY,QACb;CACD,QAAQ,EACN,mBAAmB,UACpB;CACF,EACF,CAAC"}
1
+ {"version":3,"file":"ArticleLists.js","names":["ark","css"],"sources":["../src/ArticleLists.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { css, cva } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { HTMLStyledProps, RecipeVariantProps, StyledProps } from \"@ndla/styled-system/types\";\nimport { createContext, type CSSProperties, forwardRef, useContext, useId, useMemo } from \"react\";\n\nconst orderedListRecipe = cva({\n base: {\n paddingInlineStart: \"large\",\n \"& > li\": {\n marginBlock: \"small\",\n _before: {\n position: \"absolute\",\n transform: \"translateX(calc(-100% - token(spacing.small)))\",\n fontVariantNumeric: \"tabular-nums\",\n },\n },\n },\n defaultVariants: {\n variant: \"numbers\",\n },\n variants: {\n variant: {\n numbers: {\n /** We utilize a CSS variable for the counter name to correctly reset counters when nested inside a letter list.\n * This way, the nested number list won't pick up on any other counters named \"numbers\" higher up in the DOM tree.\n * This fixes the following scenario\n * ol (numbers) -> 1.\n * ol(letters) -> A.\n * ol (numbers) -> 1. (Without the CSS variable, this would be 1.1)\n */\n counterReset: \"var(--counter-name) var(--start, 0)\",\n \"& > li\": {\n counterIncrement: \"var(--counter-name)\",\n _before: {\n content: `counters(var(--counter-name), \".\") \". \"`,\n },\n // If a nested OL is not a letters variant, it's a numbers variant. Keep increasing the margin to account for wider numbers.\n \"& > ol:not([data-variant='letters']) > li\": {\n paddingInlineStart: \"small\",\n \"& > ol:not([data-variant='letters']) > li\": {\n paddingInlineStart: \"large\",\n \"& > ol:not([data-variant='letters']) > li\": {\n paddingInlineStart: \"xxlarge\",\n },\n },\n },\n },\n },\n letters: {\n counterReset: \"letters var(--start, 0)\",\n \"& > li\": {\n counterIncrement: \"letters\",\n _before: {\n content: `counter(letters, upper-alpha) \". \"`,\n },\n \"& > ol[data-variant='letters'] > li\": {\n _before: {\n content: `counter(letters, lower-alpha) \". \"`,\n },\n \"& > ol[data-variant='letters'] > li\": {\n _before: {\n content: `counter(letters, lower-roman) \". \"`,\n },\n },\n },\n },\n },\n },\n },\n});\n\nexport type OrderedListVariantProps = NonNullable<RecipeVariantProps<typeof orderedListRecipe>>;\n\nexport interface OrderedListProps extends StyledProps, HTMLArkProps<\"ol\">, OrderedListVariantProps {}\n\nconst StyledOrderedList = styled(ark.ol, {}, { baseComponent: true });\n\nconst ListContext = createContext<\"numbers\" | \"letters\" | undefined>(undefined);\n\nconst useCurrentListContext = () => {\n const ctx = useContext(ListContext);\n return ctx;\n};\n\nexport const OrderedList = forwardRef<HTMLOListElement, OrderedListProps>(\n ({ variant = \"numbers\", css: cssProp, start, ...props }, ref) => {\n const counterId = useId();\n const currentContext = useCurrentListContext();\n\n const style = useMemo(() => {\n const css: Record<string, any> = { \"--start\": start ? start - 1 : 0 };\n if (variant !== currentContext) {\n css[\"--counter-name\"] = counterId;\n }\n return css as CSSProperties;\n }, [start, variant, currentContext, counterId]);\n\n return (\n <ListContext.Provider value={variant ?? \"numbers\"}>\n <StyledOrderedList\n data-embed-type=\"ordered-list\"\n data-variant={variant}\n start={start}\n type={variant === \"letters\" ? \"A\" : undefined}\n css={css.raw(orderedListRecipe.raw({ variant }), cssProp)}\n style={style}\n ref={ref}\n {...props}\n />\n </ListContext.Provider>\n );\n },\n);\n\nexport interface UnOrderedListProps extends StyledProps, HTMLArkProps<\"ul\"> {}\n\nexport const StyledUnOrderedList = styled(\"ul\", {\n base: {\n listStyle: \"revert\",\n marginInlineStart: \"medium\",\n paddingInlineStart: \"small\",\n \"& ul\": {\n marginInlineStart: \"0\",\n },\n \"& li\": {\n marginBlock: \"small\",\n paddingInlineStart: \"small\",\n _marker: {\n color: \"icon.strong\",\n },\n\n \"& > ol\": {\n marginInlineStart: \"0 !important\",\n },\n },\n\n listStyleType: \"disc\",\n \"& > li > ul\": {\n listStyleType: \"circle\",\n \"& > li > ul\": {\n listStyleType: \"square\",\n },\n },\n },\n});\n\nexport const UnOrderedList = forwardRef<HTMLUListElement, UnOrderedListProps>((props, ref) => {\n const counterId = useId();\n\n const style = useMemo(\n () =>\n ({\n \"--counter-name\": counterId,\n }) as CSSProperties,\n [counterId],\n );\n\n return <StyledUnOrderedList ref={ref} style={style} {...props} />;\n});\n\nexport const DefinitionList = styled(\"dl\", {\n base: {\n \"& dt\": {\n fontWeight: \"bold\",\n },\n \"& dd\": {\n marginInlineStart: \"medium\",\n },\n },\n});\n\nexport type DefinitionListProps = HTMLStyledProps<\"dl\">;\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,qBAAA,GAAA,wBAAA,KAAwB;CAC5B,MAAM;EACJ,oBAAoB;EACpB,UAAU;GACR,aAAa;GACb,SAAS;IACP,UAAU;IACV,WAAW;IACX,oBAAoB;GACtB;EACF;CACF;CACA,iBAAiB,EACf,SAAS,UACX;CACA,UAAU,EACR,SAAS;EACP,SAAS;;;;;;;;GAQP,cAAc;GACd,UAAU;IACR,kBAAkB;IAClB,SAAS,EACP,SAAS,0CACX;IAEA,6CAA6C;KAC3C,oBAAoB;KACpB,6CAA6C;MAC3C,oBAAoB;MACpB,6CAA6C,EAC3C,oBAAoB,UACtB;KACF;IACF;GACF;EACF;EACA,SAAS;GACP,cAAc;GACd,UAAU;IACR,kBAAkB;IAClB,SAAS,EACP,SAAS,qCACX;IACA,uCAAuC;KACrC,SAAS,EACP,SAAS,qCACX;KACA,uCAAuC,EACrC,SAAS,EACP,SAAS,qCACX,EACF;IACF;GACF;EACF;CACF,EACF;AACF,CAAC;AAMD,MAAM,qBAAA,GAAA,wBAAA,QAA2BA,cAAAA,IAAI,IAAI,CAAC,GAAG,EAAE,eAAe,KAAK,CAAC;AAEpE,MAAM,eAAA,GAAA,MAAA,eAA+D,KAAA,CAAS;AAE9E,MAAM,8BAA8B;CAElC,QAAA,GAAA,MAAA,YADuB,WACd;AACX;AAEA,MAAa,eAAA,GAAA,MAAA,aACV,EAAE,UAAU,WAAW,KAAK,SAAS,OAAO,GAAG,SAAS,QAAQ;CAC/D,MAAM,aAAA,GAAA,MAAA,OAAkB;CACxB,MAAM,iBAAiB,sBAAsB;CAE7C,MAAM,SAAA,GAAA,MAAA,eAAsB;EAC1B,MAAM,MAA2B,EAAE,WAAW,QAAQ,QAAQ,IAAI,EAAE;EACpE,IAAI,YAAY,gBACd,IAAI,oBAAoB;EAE1B,OAAO;CACT,GAAG;EAAC;EAAO;EAAS;EAAgB;CAAS,CAAC;CAE9C,OACE,iBAAA,GAAA,kBAAA,KAAC,YAAY,UAAb;EAAsB,OAAO,WAAW;YACtC,iBAAA,GAAA,kBAAA,KAAC,mBAAD;GACE,mBAAgB;GAChB,gBAAc;GACP;GACP,MAAM,YAAY,YAAY,MAAM,KAAA;GACpC,KAAKC,wBAAAA,IAAI,IAAI,kBAAkB,IAAI,EAAE,QAAQ,CAAC,GAAG,OAAO;GACjD;GACF;GACL,GAAI;EACL,CAAA;CACmB,CAAA;AAE1B,CACF;AAIA,MAAa,uBAAA,GAAA,wBAAA,QAA6B,MAAM,EAC9C,MAAM;CACJ,WAAW;CACX,mBAAmB;CACnB,oBAAoB;CACpB,QAAQ,EACN,mBAAmB,IACrB;CACA,QAAQ;EACN,aAAa;EACb,oBAAoB;EACpB,SAAS,EACP,OAAO,cACT;EAEA,UAAU,EACR,mBAAmB,eACrB;CACF;CAEA,eAAe;CACf,eAAe;EACb,eAAe;EACf,eAAe,EACb,eAAe,SACjB;CACF;AACF,EACF,CAAC;AAED,MAAa,iBAAA,GAAA,MAAA,aAAkE,OAAO,QAAQ;CAC5F,MAAM,aAAA,GAAA,MAAA,OAAkB;CAUxB,OAAO,iBAAA,GAAA,kBAAA,KAAC,qBAAD;EAA0B;EAAK,QAAA,GAAA,MAAA,gBANjC,EACC,kBAAkB,UACpB,IACF,CAAC,SAAS,CAGqC;EAAG,GAAI;CAAQ,CAAA;AAClE,CAAC;AAED,MAAa,kBAAA,GAAA,wBAAA,QAAwB,MAAM,EACzC,MAAM;CACJ,QAAQ,EACN,YAAY,OACd;CACA,QAAQ,EACN,mBAAmB,SACrB;AACF,EACF,CAAC"}
package/lib/Badge.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Badge.js","names":["ark","css"],"sources":["../src/Badge.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { type RecipeVariantProps, css, cva } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\n\nconst badgeRecipe = cva({\n base: {\n paddingInline: \"xsmall\",\n borderRadius: \"xsmall\",\n border: \"1px solid\",\n width: \"fit-content\",\n color: \"text.default\",\n },\n defaultVariants: {\n colorTheme: \"neutral\",\n size: \"medium\",\n },\n variants: {\n size: {\n small: {\n textStyle: \"label.small\",\n },\n medium: {\n textStyle: \"label.medium\",\n },\n },\n colorTheme: {\n brand1: {\n backgroundColor: \"surface.brand.1.moderate\",\n borderColor: \"surface.brand.1.strong\",\n },\n brand2: {\n backgroundColor: \"surface.brand.2.moderate\",\n borderColor: \"surface.brand.2.strong\",\n },\n brand3: {\n backgroundColor: \"surface.brand.3.subtle\",\n borderColor: \"surface.brand.3.strong\",\n },\n neutral: {\n backgroundColor: \"surface.infoSubtle\",\n borderColor: \"stroke.info\",\n },\n danger: {\n backgroundColor: \"surface.dangerSubtle\",\n borderColor: \"surface.danger\",\n },\n success: {\n backgroundColor: \"surface.successSubtle\",\n borderColor: \"surface.success\",\n },\n warning: {\n backgroundColor: \"surface.warningSubtle\",\n borderColor: \"surface.warning\",\n },\n },\n },\n});\n\nexport type BadgeVariantProps = NonNullable<RecipeVariantProps<typeof badgeRecipe>>;\n\nexport type BadgeVariant = NonNullable<BadgeVariantProps>[\"colorTheme\"];\n\nexport interface BadgeProps extends StyledProps, HTMLArkProps<\"div\">, BadgeVariantProps {}\n\nconst StyledBadge = styled(ark.div, {}, { baseComponent: true });\n\nexport const Badge = forwardRef<HTMLDivElement, BadgeProps>(({ colorTheme, size, css: cssProp, ...props }, ref) => (\n <StyledBadge css={css.raw(badgeRecipe.raw({ colorTheme, size }), cssProp)} {...props} ref={ref} />\n));\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,eAAA,GAAA,wBAAA,KAAkB;CACtB,MAAM;EACJ,eAAe;EACf,cAAc;EACd,QAAQ;EACR,OAAO;EACP,OAAO;EACR;CACD,iBAAiB;EACf,YAAY;EACZ,MAAM;EACP;CACD,UAAU;EACR,MAAM;GACJ,OAAO,EACL,WAAW,eACZ;GACD,QAAQ,EACN,WAAW,gBACZ;GACF;EACD,YAAY;GACV,QAAQ;IACN,iBAAiB;IACjB,aAAa;IACd;GACD,QAAQ;IACN,iBAAiB;IACjB,aAAa;IACd;GACD,QAAQ;IACN,iBAAiB;IACjB,aAAa;IACd;GACD,SAAS;IACP,iBAAiB;IACjB,aAAa;IACd;GACD,QAAQ;IACN,iBAAiB;IACjB,aAAa;IACd;GACD,SAAS;IACP,iBAAiB;IACjB,aAAa;IACd;GACD,SAAS;IACP,iBAAiB;IACjB,aAAa;IACd;GACF;EACF;CACF,CAAC;AAQF,MAAM,eAAA,GAAA,wBAAA,QAAqBA,cAAAA,IAAI,KAAK,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAEhE,MAAa,SAAA,GAAA,MAAA,aAAgD,EAAE,YAAY,MAAM,KAAK,SAAS,GAAG,SAAS,QACzG,iBAAA,GAAA,kBAAA,KAAC,aAAD;CAAa,KAAKC,wBAAAA,IAAI,IAAI,YAAY,IAAI;EAAE;EAAY;EAAM,CAAC,EAAE,QAAQ;CAAE,GAAI;CAAY;CAAO,CAAA,CAClG"}
1
+ {"version":3,"file":"Badge.js","names":["ark","css"],"sources":["../src/Badge.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { type RecipeVariantProps, css, cva } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\n\nconst badgeRecipe = cva({\n base: {\n paddingInline: \"xsmall\",\n borderRadius: \"xsmall\",\n border: \"1px solid\",\n width: \"fit-content\",\n color: \"text.default\",\n },\n defaultVariants: {\n colorTheme: \"neutral\",\n size: \"medium\",\n },\n variants: {\n size: {\n small: {\n textStyle: \"label.small\",\n },\n medium: {\n textStyle: \"label.medium\",\n },\n },\n colorTheme: {\n brand1: {\n backgroundColor: \"surface.brand.1.moderate\",\n borderColor: \"surface.brand.1.strong\",\n },\n brand2: {\n backgroundColor: \"surface.brand.2.moderate\",\n borderColor: \"surface.brand.2.strong\",\n },\n brand3: {\n backgroundColor: \"surface.brand.3.subtle\",\n borderColor: \"surface.brand.3.strong\",\n },\n neutral: {\n backgroundColor: \"surface.infoSubtle\",\n borderColor: \"stroke.info\",\n },\n danger: {\n backgroundColor: \"surface.dangerSubtle\",\n borderColor: \"surface.danger\",\n },\n success: {\n backgroundColor: \"surface.successSubtle\",\n borderColor: \"surface.success\",\n },\n warning: {\n backgroundColor: \"surface.warningSubtle\",\n borderColor: \"surface.warning\",\n },\n },\n },\n});\n\nexport type BadgeVariantProps = NonNullable<RecipeVariantProps<typeof badgeRecipe>>;\n\nexport type BadgeVariant = NonNullable<BadgeVariantProps>[\"colorTheme\"];\n\nexport interface BadgeProps extends StyledProps, HTMLArkProps<\"div\">, BadgeVariantProps {}\n\nconst StyledBadge = styled(ark.div, {}, { baseComponent: true });\n\nexport const Badge = forwardRef<HTMLDivElement, BadgeProps>(({ colorTheme, size, css: cssProp, ...props }, ref) => (\n <StyledBadge css={css.raw(badgeRecipe.raw({ colorTheme, size }), cssProp)} {...props} ref={ref} />\n));\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,eAAA,GAAA,wBAAA,KAAkB;CACtB,MAAM;EACJ,eAAe;EACf,cAAc;EACd,QAAQ;EACR,OAAO;EACP,OAAO;CACT;CACA,iBAAiB;EACf,YAAY;EACZ,MAAM;CACR;CACA,UAAU;EACR,MAAM;GACJ,OAAO,EACL,WAAW,cACb;GACA,QAAQ,EACN,WAAW,eACb;EACF;EACA,YAAY;GACV,QAAQ;IACN,iBAAiB;IACjB,aAAa;GACf;GACA,QAAQ;IACN,iBAAiB;IACjB,aAAa;GACf;GACA,QAAQ;IACN,iBAAiB;IACjB,aAAa;GACf;GACA,SAAS;IACP,iBAAiB;IACjB,aAAa;GACf;GACA,QAAQ;IACN,iBAAiB;IACjB,aAAa;GACf;GACA,SAAS;IACP,iBAAiB;IACjB,aAAa;GACf;GACA,SAAS;IACP,iBAAiB;IACjB,aAAa;GACf;EACF;CACF;AACF,CAAC;AAQD,MAAM,eAAA,GAAA,wBAAA,QAAqBA,cAAAA,IAAI,KAAK,CAAC,GAAG,EAAE,eAAe,KAAK,CAAC;AAE/D,MAAa,SAAA,GAAA,MAAA,aAAgD,EAAE,YAAY,MAAM,KAAK,SAAS,GAAG,SAAS,QACzG,iBAAA,GAAA,kBAAA,KAAC,aAAD;CAAa,KAAKC,wBAAAA,IAAI,IAAI,YAAY,IAAI;EAAE;EAAY;CAAK,CAAC,GAAG,OAAO;CAAG,GAAI;CAAY;AAAM,CAAA,CAClG"}
@@ -1 +1 @@
1
- {"version":3,"file":"BlockQuote.js","names":["ark","css"],"sources":["../src/BlockQuote.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { ark, type HTMLArkProps } from \"@ark-ui/react\";\nimport { type RecipeVariantProps, css, cva } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\n\nconst blockQuoteRecipe = cva({\n base: {\n borderInlineStart: \"4px solid\",\n paddingInline: \"medium\",\n },\n variants: {\n variant: {\n neutral: {\n borderColor: \"stroke.subtle\",\n background: \"surface.default\",\n },\n brand1: {\n background: \"surface.brand.1.subtle\",\n borderColor: \"surface.brand.1.strong\",\n },\n brand2: {\n background: \"surface.brand.2.subtle\",\n borderColor: \"surface.brand.2.strong\",\n },\n },\n },\n defaultVariants: {\n variant: \"neutral\",\n },\n});\n\nexport type BlockQuoteVariantProps = NonNullable<RecipeVariantProps<typeof blockQuoteRecipe>>;\n\nexport interface BlockQuoteProps extends HTMLArkProps<\"blockquote\">, StyledProps, BlockQuoteVariantProps {}\n\nconst StyledBlockQuote = styled(ark.blockquote, {}, { baseComponent: true });\n\nexport const BlockQuote = forwardRef<HTMLQuoteElement, BlockQuoteProps>(({ variant, css: cssProp, ...props }, ref) => (\n <StyledBlockQuote css={css.raw(blockQuoteRecipe.raw({ variant }), cssProp)} {...props} ref={ref} />\n));\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,oBAAA,GAAA,wBAAA,KAAuB;CAC3B,MAAM;EACJ,mBAAmB;EACnB,eAAe;EAChB;CACD,UAAU,EACR,SAAS;EACP,SAAS;GACP,aAAa;GACb,YAAY;GACb;EACD,QAAQ;GACN,YAAY;GACZ,aAAa;GACd;EACD,QAAQ;GACN,YAAY;GACZ,aAAa;GACd;EACF,EACF;CACD,iBAAiB,EACf,SAAS,WACV;CACF,CAAC;AAMF,MAAM,oBAAA,GAAA,wBAAA,QAA0BA,cAAAA,IAAI,YAAY,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAE5E,MAAa,cAAA,GAAA,MAAA,aAA4D,EAAE,SAAS,KAAK,SAAS,GAAG,SAAS,QAC5G,iBAAA,GAAA,kBAAA,KAAC,kBAAD;CAAkB,KAAKC,wBAAAA,IAAI,IAAI,iBAAiB,IAAI,EAAE,SAAS,CAAC,EAAE,QAAQ;CAAE,GAAI;CAAY;CAAO,CAAA,CACnG"}
1
+ {"version":3,"file":"BlockQuote.js","names":["ark","css"],"sources":["../src/BlockQuote.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { ark, type HTMLArkProps } from \"@ark-ui/react\";\nimport { type RecipeVariantProps, css, cva } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\n\nconst blockQuoteRecipe = cva({\n base: {\n borderInlineStart: \"4px solid\",\n paddingInline: \"medium\",\n },\n variants: {\n variant: {\n neutral: {\n borderColor: \"stroke.subtle\",\n background: \"surface.default\",\n },\n brand1: {\n background: \"surface.brand.1.subtle\",\n borderColor: \"surface.brand.1.strong\",\n },\n brand2: {\n background: \"surface.brand.2.subtle\",\n borderColor: \"surface.brand.2.strong\",\n },\n },\n },\n defaultVariants: {\n variant: \"neutral\",\n },\n});\n\nexport type BlockQuoteVariantProps = NonNullable<RecipeVariantProps<typeof blockQuoteRecipe>>;\n\nexport interface BlockQuoteProps extends HTMLArkProps<\"blockquote\">, StyledProps, BlockQuoteVariantProps {}\n\nconst StyledBlockQuote = styled(ark.blockquote, {}, { baseComponent: true });\n\nexport const BlockQuote = forwardRef<HTMLQuoteElement, BlockQuoteProps>(({ variant, css: cssProp, ...props }, ref) => (\n <StyledBlockQuote css={css.raw(blockQuoteRecipe.raw({ variant }), cssProp)} {...props} ref={ref} />\n));\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,oBAAA,GAAA,wBAAA,KAAuB;CAC3B,MAAM;EACJ,mBAAmB;EACnB,eAAe;CACjB;CACA,UAAU,EACR,SAAS;EACP,SAAS;GACP,aAAa;GACb,YAAY;EACd;EACA,QAAQ;GACN,YAAY;GACZ,aAAa;EACf;EACA,QAAQ;GACN,YAAY;GACZ,aAAa;EACf;CACF,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CAAC;AAMD,MAAM,oBAAA,GAAA,wBAAA,QAA0BA,cAAAA,IAAI,YAAY,CAAC,GAAG,EAAE,eAAe,KAAK,CAAC;AAE3E,MAAa,cAAA,GAAA,MAAA,aAA4D,EAAE,SAAS,KAAK,SAAS,GAAG,SAAS,QAC5G,iBAAA,GAAA,kBAAA,KAAC,kBAAD;CAAkB,KAAKC,wBAAAA,IAAI,IAAI,iBAAiB,IAAI,EAAE,QAAQ,CAAC,GAAG,OAAO;CAAG,GAAI;CAAY;AAAM,CAAA,CACnG"}
package/lib/Button.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Button.js","names":["ark","Spinner","css"],"sources":["../src/Button.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { type RecipeVariantProps, css, cva } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { RecipeVariant, StyledProps } from \"@ndla/styled-system/types\";\nimport { type ReactNode, forwardRef, useMemo } from \"react\";\nimport { Spinner } from \"./Spinner\";\n\nexport const buttonBaseRecipe = cva({\n base: {\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n gap: \"xxsmall\",\n cursor: \"pointer\",\n textDecoration: \"none\",\n fontWeight: \"bold\",\n transitionProperty: \"all\",\n transitionDuration: \"fast\",\n transitionTimingFunction: \"default\",\n textAlign: \"center\",\n borderRadius: \"xsmall\",\n outline: \"none\",\n boxShadowColor: \"stroke.default\",\n _disabled: {\n cursor: \"not-allowed\",\n color: \"text.onAction\",\n background: \"surface.disabled\",\n boxShadowColor: \"surface.disabled\",\n \"& svg\": {\n color: \"text.onAction\",\n },\n _hover: {\n color: \"text.onAction\",\n background: \"surface.disabled\",\n },\n },\n _focusVisible: {\n boxShadow: \"inset 0 0 0 var(--shadow-width, 3px) var(--shadow-color)\",\n },\n _motionReduce: {\n transition: \"none\",\n transitionDuration: \"0s\",\n },\n },\n defaultVariants: {\n variant: \"primary\",\n },\n variants: {\n variant: {\n primary: {\n color: \"text.onAction\",\n background: \"surface.action\",\n _hover: {\n color: \"text.onAction\",\n background: \"surface.action.hover\",\n },\n _active: {\n color: \"text.onAction\",\n background: \"surface.action.active\",\n },\n _focusVisible: {\n boxShadow:\n \"inset 0 0 0 var(--shadow-width, 3px) var(--shadow-color), inset 0px 0px 0px calc(var(--shadow-width, 3px) * 2) currentcolor\",\n },\n _on: {\n background: \"surface.action.selected\",\n },\n },\n secondary: {\n color: \"text.strong\",\n background: \"surface.default\",\n boxShadow: \"inset 0 0 0 1px var(--shadow-color)\",\n _hover: {\n background: \"surface.actionSubtle.hover\",\n },\n _active: {\n background: \"surface.actionSubtle.hover.strong\",\n },\n _on: {\n background: \"surface.actionSubtle.active\",\n },\n },\n tertiary: {\n color: \"text.strong\",\n background: \"transparent\",\n _hover: {\n boxShadow: \"inset 0 0 0 1px var(--shadow-color)\",\n background: \"surface.actionSubtle.hover\",\n _focusVisible: {\n boxShadow: \"inset 0 0 0 var(--shadow-width, 3px) var(--shadow-color)\",\n },\n },\n _active: {\n borderColor: \"stroke.default\",\n background: \"surface.actionSubtle.hover.strong\",\n },\n _on: {\n background: \"surface.actionSubtle.active\",\n boxShadow: \"inset 0 0 0 1px var(--shadow-color)\",\n },\n },\n clear: {\n background: \"transparent\",\n color: \"text.strong\",\n _hover: {\n color: \"stroke.hover\",\n },\n },\n clearSubtle: {\n background: \"transparent\",\n color: \"text.onAction\",\n _hover: {\n color: \"surface.actionSubtle.hover.strong\",\n },\n },\n danger: {\n background: \"surface.danger\",\n color: \"text.onAction\",\n _hover: {\n background: \"surface.danger.hover\",\n },\n _active: {\n background: \"surface.danger.active\",\n },\n _focusVisible: {\n boxShadowColor: \"surface.danger\",\n boxShadow:\n \"inset 0 0 0 var(--shadow-width, 3px) var(--shadow-color), inset 0px 0px 0px calc(var(--shadow-width, 3px) * 2) currentcolor\",\n },\n },\n success: {\n background: \"surface.success\",\n color: \"text.onAction\",\n _hover: {\n background: \"surface.success.hover\",\n },\n _active: {\n background: \"surface.success.active\",\n },\n _focusVisible: {\n boxShadowColor: \"surface.success\",\n boxShadow:\n \"inset 0 0 0 var(--shadow-width, 3px) var(--shadow-color), inset 0px 0px 0px calc(var(--shadow-width, 3px) * 2) currentcolor\",\n },\n },\n link: {\n background: \"transparent\",\n color: \"text.link\",\n fontWeight: \"normal\",\n textDecoration: \"underline\",\n transitionProperty: \"unset\",\n transitionTimingFunction: \"unset\",\n transitionDuration: \"unset\",\n _hover: {\n textDecoration: \"none\",\n },\n _focusVisible: {\n boxShadow: \"none\",\n outline: \"3px\",\n borderRadius: \"xsmall\",\n outlineColor: \"stroke.default\",\n outlineOffset: \"3px\",\n outlineStyle: \"solid\",\n },\n },\n },\n },\n});\n\nexport const buttonRecipe = cva({\n defaultVariants: {\n size: \"medium\",\n },\n variants: {\n size: {\n medium: {\n textStyle: \"label.medium\",\n paddingInline: \"small\",\n paddingBlock: \"xxsmall\",\n minHeight: \"24\",\n \"& svg\": {\n marginInline: \"0\",\n marginBlock: \"0\",\n width: \"medium\",\n height: \"medium\",\n },\n },\n small: {\n textStyle: \"label.small\",\n minHeight: \"large\",\n paddingInline: \"xsmall\",\n paddingBlock: \"4xsmall\",\n \"& svg\": {\n marginInline: \"0\",\n marginBlock: \"0\",\n width: \"small\",\n height: \"small\",\n },\n },\n },\n },\n});\n\nexport const iconButtonRecipe = cva({\n base: {\n lineHeight: \"1\",\n minHeight: \"unset\",\n },\n defaultVariants: {\n size: \"medium\",\n },\n variants: {\n size: {\n medium: {\n \"--shadow-width\": \"3px\",\n height: \"xxlarge\",\n width: \"xxlarge\",\n \"& svg\": {\n marginInline: \"0\",\n marginBlock: \"0\",\n width: \"medium\",\n height: \"medium\",\n },\n paddingInline: \"xsmall\",\n paddingBlock: \"xsmall\",\n },\n small: {\n \"--shadow-width\": \"2px\",\n height: \"large\",\n width: \"large\",\n \"& svg\": {\n marginInline: \"0\",\n marginBlock: \"0\",\n width: \"small\",\n height: \"small\",\n },\n paddingInline: \"xxsmall\",\n paddingBlock: \"xxsmall\",\n },\n },\n },\n});\n\ntype Variant = RecipeVariant<typeof buttonBaseRecipe>[\"variant\"];\n\ntype ButtonVariant = Exclude<Variant, \"clear\" | \"clearSubtle\">;\n\nexport interface ButtonVariantProps extends NonNullable<RecipeVariantProps<typeof buttonRecipe>> {\n variant?: ButtonVariant;\n}\n\nexport interface BaseButtonProps extends HTMLArkProps<\"button\">, StyledProps {\n loading?: boolean;\n loadingContent?: ReactNode;\n replaceContent?: boolean;\n}\n\nexport interface ButtonProps extends BaseButtonProps, ButtonVariantProps {}\n\nconst StyledButton = styled(ark.button, {}, { baseComponent: true, defaultProps: { type: \"button\" } });\n\nexport const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(\n ({ loading, loadingContent: loadingContentProp, replaceContent, onClick: _onClick, children, ...props }, ref) => {\n const ariaDisabled = loading ? { \"aria-disabled\": true } : {};\n\n const onClick = useMemo(() => (loading ? undefined : _onClick), [_onClick, loading]);\n\n const loadingContent = useMemo(() => {\n return replaceContent ? (\n loadingContentProp\n ) : (\n <>\n {loadingContentProp}\n {children}\n </>\n );\n }, [children, loadingContentProp, replaceContent]);\n\n return (\n <StyledButton onClick={onClick} {...ariaDisabled} {...props} ref={ref}>\n {loading ? loadingContent : children}\n </StyledButton>\n );\n },\n);\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n ({ variant, loadingContent, size, css: cssProp, ...props }, ref) => (\n <BaseButton\n {...props}\n loadingContent={loadingContent ?? <Spinner size=\"small\" />}\n css={css.raw(\n buttonBaseRecipe.raw({ variant }),\n variant !== \"link\" ? buttonRecipe.raw({ size }) : undefined,\n cssProp,\n )}\n ref={ref}\n />\n ),\n);\n\ntype IconButtonVariant = Exclude<Variant, \"link\">;\n\nexport interface IconButtonVariantProps extends NonNullable<RecipeVariantProps<typeof iconButtonRecipe>> {\n variant?: IconButtonVariant;\n}\n\nexport interface IconButtonProps extends BaseButtonProps, IconButtonVariantProps {}\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n ({ variant, css: cssProp, loadingContent, size, replaceContent = true, ...props }, ref) => (\n <BaseButton\n {...props}\n css={css.raw(buttonBaseRecipe.raw({ variant }), iconButtonRecipe.raw({ size }), cssProp)}\n loadingContent={loadingContent ?? <Spinner size=\"small\" />}\n replaceContent={replaceContent}\n ref={ref}\n />\n ),\n);\n"],"mappings":"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"}
1
+ {"version":3,"file":"Button.js","names":["ark","Spinner","css"],"sources":["../src/Button.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { type RecipeVariantProps, css, cva } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { RecipeVariant, StyledProps } from \"@ndla/styled-system/types\";\nimport { type ReactNode, forwardRef, useMemo } from \"react\";\nimport { Spinner } from \"./Spinner\";\n\nexport const buttonBaseRecipe = cva({\n base: {\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n gap: \"xxsmall\",\n cursor: \"pointer\",\n textDecoration: \"none\",\n fontWeight: \"bold\",\n transitionProperty: \"all\",\n transitionDuration: \"fast\",\n transitionTimingFunction: \"default\",\n textAlign: \"center\",\n borderRadius: \"xsmall\",\n outline: \"none\",\n boxShadowColor: \"stroke.default\",\n _disabled: {\n cursor: \"not-allowed\",\n color: \"text.onAction\",\n background: \"surface.disabled\",\n boxShadowColor: \"surface.disabled\",\n \"& svg\": {\n color: \"text.onAction\",\n },\n _hover: {\n color: \"text.onAction\",\n background: \"surface.disabled\",\n },\n },\n _focusVisible: {\n boxShadow: \"inset 0 0 0 var(--shadow-width, 3px) var(--shadow-color)\",\n },\n _motionReduce: {\n transition: \"none\",\n transitionDuration: \"0s\",\n },\n },\n defaultVariants: {\n variant: \"primary\",\n },\n variants: {\n variant: {\n primary: {\n color: \"text.onAction\",\n background: \"surface.action\",\n _hover: {\n color: \"text.onAction\",\n background: \"surface.action.hover\",\n },\n _active: {\n color: \"text.onAction\",\n background: \"surface.action.active\",\n },\n _focusVisible: {\n boxShadow:\n \"inset 0 0 0 var(--shadow-width, 3px) var(--shadow-color), inset 0px 0px 0px calc(var(--shadow-width, 3px) * 2) currentcolor\",\n },\n _on: {\n background: \"surface.action.selected\",\n },\n },\n secondary: {\n color: \"text.strong\",\n background: \"surface.default\",\n boxShadow: \"inset 0 0 0 1px var(--shadow-color)\",\n _hover: {\n background: \"surface.actionSubtle.hover\",\n },\n _active: {\n background: \"surface.actionSubtle.hover.strong\",\n },\n _on: {\n background: \"surface.actionSubtle.active\",\n },\n },\n tertiary: {\n color: \"text.strong\",\n background: \"transparent\",\n _hover: {\n boxShadow: \"inset 0 0 0 1px var(--shadow-color)\",\n background: \"surface.actionSubtle.hover\",\n _focusVisible: {\n boxShadow: \"inset 0 0 0 var(--shadow-width, 3px) var(--shadow-color)\",\n },\n },\n _active: {\n borderColor: \"stroke.default\",\n background: \"surface.actionSubtle.hover.strong\",\n },\n _on: {\n background: \"surface.actionSubtle.active\",\n boxShadow: \"inset 0 0 0 1px var(--shadow-color)\",\n },\n },\n clear: {\n background: \"transparent\",\n color: \"text.strong\",\n _hover: {\n color: \"stroke.hover\",\n },\n },\n clearSubtle: {\n background: \"transparent\",\n color: \"text.onAction\",\n _hover: {\n color: \"surface.actionSubtle.hover.strong\",\n },\n },\n danger: {\n background: \"surface.danger\",\n color: \"text.onAction\",\n _hover: {\n background: \"surface.danger.hover\",\n },\n _active: {\n background: \"surface.danger.active\",\n },\n _focusVisible: {\n boxShadowColor: \"surface.danger\",\n boxShadow:\n \"inset 0 0 0 var(--shadow-width, 3px) var(--shadow-color), inset 0px 0px 0px calc(var(--shadow-width, 3px) * 2) currentcolor\",\n },\n },\n success: {\n background: \"surface.success\",\n color: \"text.onAction\",\n _hover: {\n background: \"surface.success.hover\",\n },\n _active: {\n background: \"surface.success.active\",\n },\n _focusVisible: {\n boxShadowColor: \"surface.success\",\n boxShadow:\n \"inset 0 0 0 var(--shadow-width, 3px) var(--shadow-color), inset 0px 0px 0px calc(var(--shadow-width, 3px) * 2) currentcolor\",\n },\n },\n link: {\n background: \"transparent\",\n color: \"text.link\",\n fontWeight: \"normal\",\n textDecoration: \"underline\",\n transitionProperty: \"unset\",\n transitionTimingFunction: \"unset\",\n transitionDuration: \"unset\",\n _hover: {\n textDecoration: \"none\",\n },\n _focusVisible: {\n boxShadow: \"none\",\n outline: \"3px\",\n borderRadius: \"xsmall\",\n outlineColor: \"stroke.default\",\n outlineOffset: \"3px\",\n outlineStyle: \"solid\",\n },\n },\n },\n },\n});\n\nexport const buttonRecipe = cva({\n defaultVariants: {\n size: \"medium\",\n },\n variants: {\n size: {\n medium: {\n textStyle: \"label.medium\",\n paddingInline: \"small\",\n paddingBlock: \"xxsmall\",\n minHeight: \"24\",\n \"& svg\": {\n marginInline: \"0\",\n marginBlock: \"0\",\n width: \"medium\",\n height: \"medium\",\n },\n },\n small: {\n textStyle: \"label.small\",\n minHeight: \"large\",\n paddingInline: \"xsmall\",\n paddingBlock: \"4xsmall\",\n \"& svg\": {\n marginInline: \"0\",\n marginBlock: \"0\",\n width: \"small\",\n height: \"small\",\n },\n },\n },\n },\n});\n\nexport const iconButtonRecipe = cva({\n base: {\n lineHeight: \"1\",\n minHeight: \"unset\",\n },\n defaultVariants: {\n size: \"medium\",\n },\n variants: {\n size: {\n medium: {\n \"--shadow-width\": \"3px\",\n height: \"xxlarge\",\n width: \"xxlarge\",\n \"& svg\": {\n marginInline: \"0\",\n marginBlock: \"0\",\n width: \"medium\",\n height: \"medium\",\n },\n paddingInline: \"xsmall\",\n paddingBlock: \"xsmall\",\n },\n small: {\n \"--shadow-width\": \"2px\",\n height: \"large\",\n width: \"large\",\n \"& svg\": {\n marginInline: \"0\",\n marginBlock: \"0\",\n width: \"small\",\n height: \"small\",\n },\n paddingInline: \"xxsmall\",\n paddingBlock: \"xxsmall\",\n },\n },\n },\n});\n\ntype Variant = RecipeVariant<typeof buttonBaseRecipe>[\"variant\"];\n\ntype ButtonVariant = Exclude<Variant, \"clear\" | \"clearSubtle\">;\n\nexport interface ButtonVariantProps extends NonNullable<RecipeVariantProps<typeof buttonRecipe>> {\n variant?: ButtonVariant;\n}\n\nexport interface BaseButtonProps extends HTMLArkProps<\"button\">, StyledProps {\n loading?: boolean;\n loadingContent?: ReactNode;\n replaceContent?: boolean;\n}\n\nexport interface ButtonProps extends BaseButtonProps, ButtonVariantProps {}\n\nconst StyledButton = styled(ark.button, {}, { baseComponent: true, defaultProps: { type: \"button\" } });\n\nexport const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(\n ({ loading, loadingContent: loadingContentProp, replaceContent, onClick: _onClick, children, ...props }, ref) => {\n const ariaDisabled = loading ? { \"aria-disabled\": true } : {};\n\n const onClick = useMemo(() => (loading ? undefined : _onClick), [_onClick, loading]);\n\n const loadingContent = useMemo(() => {\n return replaceContent ? (\n loadingContentProp\n ) : (\n <>\n {loadingContentProp}\n {children}\n </>\n );\n }, [children, loadingContentProp, replaceContent]);\n\n return (\n <StyledButton onClick={onClick} {...ariaDisabled} {...props} ref={ref}>\n {loading ? loadingContent : children}\n </StyledButton>\n );\n },\n);\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n ({ variant, loadingContent, size, css: cssProp, ...props }, ref) => (\n <BaseButton\n {...props}\n loadingContent={loadingContent ?? <Spinner size=\"small\" />}\n css={css.raw(\n buttonBaseRecipe.raw({ variant }),\n variant !== \"link\" ? buttonRecipe.raw({ size }) : undefined,\n cssProp,\n )}\n ref={ref}\n />\n ),\n);\n\ntype IconButtonVariant = Exclude<Variant, \"link\">;\n\nexport interface IconButtonVariantProps extends NonNullable<RecipeVariantProps<typeof iconButtonRecipe>> {\n variant?: IconButtonVariant;\n}\n\nexport interface IconButtonProps extends BaseButtonProps, IconButtonVariantProps {}\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n ({ variant, css: cssProp, loadingContent, size, replaceContent = true, ...props }, ref) => (\n <BaseButton\n {...props}\n css={css.raw(buttonBaseRecipe.raw({ variant }), iconButtonRecipe.raw({ size }), cssProp)}\n loadingContent={loadingContent ?? <Spinner size=\"small\" />}\n replaceContent={replaceContent}\n ref={ref}\n />\n ),\n);\n"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"Card.js","names":["ark","Heading","Image"],"sources":["../../src/Card/Card.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { ark, type HTMLArkProps } from \"@ark-ui/react\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps, RecipeVariantProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\nimport { Image } from \"../Image\";\nimport { Heading, type TextProps } from \"../Text\";\n\nconst cardRecipe = sva({\n slots: [\"root\", \"title\", \"content\", \"image\"],\n base: {\n root: {\n position: \"relative\",\n outline: \"1px solid\",\n borderRadius: \"xsmall\",\n outlineColor: \"transparent\",\n outlineOffset: \"-1px\",\n height: \"100%\",\n boxShadow: \"xsmall\",\n transitionDuration: \"fast\",\n transitionProperty: \"background, color, outline-color\",\n transitionTimingFunction: \"default\",\n background: \"surface.default\",\n overflow: \"hidden\",\n },\n content: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"small\",\n paddingBlockStart: \"small\",\n paddingBlockEnd: \"medium\",\n paddingInline: \"small\",\n },\n title: {\n textDecoration: \"underline\",\n _hover: {\n textDecoration: \"none\",\n },\n },\n image: {\n height: \"200px\",\n objectFit: \"cover\",\n width: \"100%\",\n },\n },\n defaultVariants: {\n nonInteractive: false,\n },\n variants: {\n nonInteractive: {\n true: {},\n false: {\n root: {\n _hover: {\n background: \"surface.hover\",\n outlineColor: \"stroke.hover\",\n },\n _active: {\n background: \"surface.active\",\n },\n },\n },\n },\n },\n});\n\nconst { withProvider, withContext } = createStyleContext(cardRecipe);\n\nexport type CardVariantProps = NonNullable<RecipeVariantProps<typeof cardRecipe>>;\n\nexport interface CardRootProps extends HTMLArkProps<\"article\">, StyledProps, CardVariantProps {}\n\nexport const CardRoot = withProvider(ark.article, \"root\", { baseComponent: true });\n\ninterface CardHeadingProps extends StyledProps, Omit<HTMLArkProps<\"p\">, \"color\">, TextProps {}\n\nconst InternalCardHeading = forwardRef<HTMLHeadingElement, CardHeadingProps>(\n ({ textStyle = \"label.large\", fontWeight = \"bold\", ...props }, ref) => (\n <Heading textStyle={textStyle} fontWeight={fontWeight} {...props} ref={ref} />\n ),\n);\n\nexport const CardHeading = withContext(InternalCardHeading, \"title\");\n\nexport const CardContent = withContext(ark.div, \"content\", { baseComponent: true });\n\nexport const CardImage = withContext(Image, \"image\");\n"],"mappings":";;;;;;;;;;;;;;;AA0EA,MAAM,EAAE,cAAc,iBAAA,GAAA,wBAAA,qBAAA,GAAA,wBAAA,KA1DC;CACrB,OAAO;EAAC;EAAQ;EAAS;EAAW;EAAQ;CAC5C,MAAM;EACJ,MAAM;GACJ,UAAU;GACV,SAAS;GACT,cAAc;GACd,cAAc;GACd,eAAe;GACf,QAAQ;GACR,WAAW;GACX,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,YAAY;GACZ,UAAU;GACX;EACD,SAAS;GACP,SAAS;GACT,eAAe;GACf,KAAK;GACL,mBAAmB;GACnB,iBAAiB;GACjB,eAAe;GAChB;EACD,OAAO;GACL,gBAAgB;GAChB,QAAQ,EACN,gBAAgB,QACjB;GACF;EACD,OAAO;GACL,QAAQ;GACR,WAAW;GACX,OAAO;GACR;EACF;CACD,iBAAiB,EACf,gBAAgB,OACjB;CACD,UAAU,EACR,gBAAgB;EACd,MAAM,EAAE;EACR,OAAO,EACL,MAAM;GACJ,QAAQ;IACN,YAAY;IACZ,cAAc;IACf;GACD,SAAS,EACP,YAAY,kBACb;GACF,EACF;EACF,EACF;CACF,CAAC,CAEkE;AAMpE,MAAa,WAAW,aAAaA,cAAAA,IAAI,SAAS,QAAQ,EAAE,eAAe,MAAM,CAAC;AAUlF,MAAa,cAAc,aANrB,GAAA,MAAA,aACH,EAAE,YAAY,eAAe,aAAa,QAAQ,GAAG,SAAS,QAC7D,iBAAA,GAAA,kBAAA,KAACC,aAAAA,SAAD;CAAoB;CAAuB;CAAY,GAAI;CAAY;CAAO,CAAA,CAEjF,EAE2D,QAAQ;AAEpE,MAAa,cAAc,YAAYD,cAAAA,IAAI,KAAK,WAAW,EAAE,eAAe,MAAM,CAAC;AAEnF,MAAa,YAAY,YAAYE,cAAAA,OAAO,QAAQ"}
1
+ {"version":3,"file":"Card.js","names":["ark","Heading","Image"],"sources":["../../src/Card/Card.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { ark, type HTMLArkProps } from \"@ark-ui/react\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps, RecipeVariantProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\nimport { Image } from \"../Image\";\nimport { Heading, type TextProps } from \"../Text\";\n\nconst cardRecipe = sva({\n slots: [\"root\", \"title\", \"content\", \"image\"],\n base: {\n root: {\n position: \"relative\",\n outline: \"1px solid\",\n borderRadius: \"xsmall\",\n outlineColor: \"transparent\",\n outlineOffset: \"-1px\",\n height: \"100%\",\n boxShadow: \"xsmall\",\n transitionDuration: \"fast\",\n transitionProperty: \"background, color, outline-color\",\n transitionTimingFunction: \"default\",\n background: \"surface.default\",\n overflow: \"hidden\",\n },\n content: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"small\",\n paddingBlockStart: \"small\",\n paddingBlockEnd: \"medium\",\n paddingInline: \"small\",\n },\n title: {\n textDecoration: \"underline\",\n _hover: {\n textDecoration: \"none\",\n },\n },\n image: {\n height: \"200px\",\n objectFit: \"cover\",\n width: \"100%\",\n },\n },\n defaultVariants: {\n nonInteractive: false,\n },\n variants: {\n nonInteractive: {\n true: {},\n false: {\n root: {\n _hover: {\n background: \"surface.hover\",\n outlineColor: \"stroke.hover\",\n },\n _active: {\n background: \"surface.active\",\n },\n },\n },\n },\n },\n});\n\nconst { withProvider, withContext } = createStyleContext(cardRecipe);\n\nexport type CardVariantProps = NonNullable<RecipeVariantProps<typeof cardRecipe>>;\n\nexport interface CardRootProps extends HTMLArkProps<\"article\">, StyledProps, CardVariantProps {}\n\nexport const CardRoot = withProvider(ark.article, \"root\", { baseComponent: true });\n\ninterface CardHeadingProps extends StyledProps, Omit<HTMLArkProps<\"p\">, \"color\">, TextProps {}\n\nconst InternalCardHeading = forwardRef<HTMLHeadingElement, CardHeadingProps>(\n ({ textStyle = \"label.large\", fontWeight = \"bold\", ...props }, ref) => (\n <Heading textStyle={textStyle} fontWeight={fontWeight} {...props} ref={ref} />\n ),\n);\n\nexport const CardHeading = withContext(InternalCardHeading, \"title\");\n\nexport const CardContent = withContext(ark.div, \"content\", { baseComponent: true });\n\nexport const CardImage = withContext(Image, \"image\");\n"],"mappings":";;;;;;;;;;;;;;;AA0EA,MAAM,EAAE,cAAc,iBAAA,GAAA,wBAAA,qBAAA,GAAA,wBAAA,KA1DC;CACrB,OAAO;EAAC;EAAQ;EAAS;EAAW;CAAO;CAC3C,MAAM;EACJ,MAAM;GACJ,UAAU;GACV,SAAS;GACT,cAAc;GACd,cAAc;GACd,eAAe;GACf,QAAQ;GACR,WAAW;GACX,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,YAAY;GACZ,UAAU;EACZ;EACA,SAAS;GACP,SAAS;GACT,eAAe;GACf,KAAK;GACL,mBAAmB;GACnB,iBAAiB;GACjB,eAAe;EACjB;EACA,OAAO;GACL,gBAAgB;GAChB,QAAQ,EACN,gBAAgB,OAClB;EACF;EACA,OAAO;GACL,QAAQ;GACR,WAAW;GACX,OAAO;EACT;CACF;CACA,iBAAiB,EACf,gBAAgB,MAClB;CACA,UAAU,EACR,gBAAgB;EACd,MAAM,CAAC;EACP,OAAO,EACL,MAAM;GACJ,QAAQ;IACN,YAAY;IACZ,cAAc;GAChB;GACA,SAAS,EACP,YAAY,iBACd;EACF,EACF;CACF,EACF;AACF,CAEkE,CAAC;AAMnE,MAAa,WAAW,aAAaA,cAAAA,IAAI,SAAS,QAAQ,EAAE,eAAe,KAAK,CAAC;AAUjF,MAAa,cAAc,aANrB,GAAA,MAAA,aACH,EAAE,YAAY,eAAe,aAAa,QAAQ,GAAG,SAAS,QAC7D,iBAAA,GAAA,kBAAA,KAACC,aAAAA,SAAD;CAAoB;CAAuB;CAAY,GAAI;CAAY;AAAM,CAAA,CAI1C,GAAqB,OAAO;AAEnE,MAAa,cAAc,YAAYD,cAAAA,IAAI,KAAK,WAAW,EAAE,eAAe,KAAK,CAAC;AAElF,MAAa,YAAY,YAAYE,cAAAA,OAAO,OAAO"}
@@ -1 +1 @@
1
- {"version":3,"file":"Checkbox.js","names":["checkboxAnatomy","Checkbox","Text"],"sources":["../src/Checkbox.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Checkbox, checkboxAnatomy, type HTMLArkProps } from \"@ark-ui/react\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { RecipeVariantProps, StyledProps } from \"@ndla/styled-system/types\";\nimport type { RefAttributes } from \"react\";\nimport { Text, type TextProps } from \"./Text\";\n\nconst checkboxRecipe = sva({\n slots: checkboxAnatomy.keys(),\n base: {\n root: {\n userSelect: \"none\",\n display: \"flex\",\n alignItems: \"center\",\n width: \"fit-content\",\n cursor: \"pointer\",\n _disabled: {\n color: \"text.disabled\",\n cursor: \"not-allowed\",\n _hover: {\n color: \"text.disabled\",\n },\n },\n },\n group: {\n display: \"flex\",\n gap: \"xxsmall\",\n flexDirection: \"column\",\n },\n control: {\n flexShrink: \"0\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n cursor: \"pointer\",\n width: \"medium\",\n height: \"medium\",\n color: \"text.strong\",\n transitionDuration: \"normal\",\n transitionProperty: \"border-color, background, box-shadow, color\",\n transitionTimingFunction: \"default\",\n _disabled: {\n cursor: \"not-allowed\",\n },\n _motionReduce: {\n transition: \"none\",\n transitionDuration: \"0s\",\n },\n },\n },\n defaultVariants: {\n variant: \"checkbox\",\n },\n variants: {\n variant: {\n checkbox: {\n root: {\n gap: \"xxsmall\",\n _hover: {\n color: \"text.action\",\n },\n _focusVisible: {\n outline: \"2px solid\",\n outlineOffset: \"4xsmall\",\n outlineColor: \"stroke.default\",\n borderRadius: \"xsmall\",\n },\n },\n control: {\n border: \"2px solid\",\n borderColor: \"stroke.subtle\",\n borderRadius: \"xsmall\",\n background: \"surface.default\",\n _hover: {\n boxShadow: \"0 0 0 4px var(--shadow-color)\",\n boxShadowColor: \"surface.actionSubtle.hover.strong\",\n },\n _checked: {\n backgroundColor: \"surface.action\",\n borderColor: \"surface.action\",\n color: \"icon.onAction\",\n },\n _disabled: {\n borderColor: \"stroke.disabled\",\n _hover: {\n borderColor: \"stroke.disabled\",\n boxShadow: \"none\",\n },\n _checked: {\n background: \"surface.disabled\",\n borderColor: \"stroke.disabled\",\n },\n },\n _invalid: {\n borderColor: \"stroke.error\",\n _checked: {\n color: \"stroke.error\",\n borderColor: \"stroke.error\",\n backgroundColor: \"surface.default\",\n },\n },\n },\n },\n chip: {\n root: {\n width: \"fit-content\",\n color: \"text.default\",\n gap: \"4xsmall\",\n background: \"surface.actionSubtle\",\n border: \"1px solid\",\n borderColor: \"stroke.subtle\",\n outlineColor: \"stroke.subtle\",\n paddingInline: \"xsmall\",\n paddingBlock: \"4xsmall\",\n borderRadius: \"large\",\n minHeight: \"large\",\n transitionDuration: \"normal\",\n transitionProperty: \"border-color, background, box-shadow, color\",\n transitionTimingFunction: \"default\",\n _disabled: {\n color: \"text.disabled\",\n borderColor: \"stroke.disabled\",\n background: \"surface.disabled\",\n _hover: {\n color: \"text.disabled\",\n borderColor: \"stroke.disabled\",\n background: \"surface.disabled\",\n },\n _checked: {\n color: \"text.disabled\",\n borderColor: \"stroke.disabled\",\n background: \"surface.disabled\",\n _hover: {\n color: \"text.disabled\",\n borderColor: \"stroke.disabled\",\n background: \"surface.disabled\",\n },\n },\n },\n _hover: {\n background: \"surface.actionSubtle.hover\",\n borderColor: \"stroke.hover\",\n outlineColor: \"stroke.hover\",\n _invalid: {\n backgroundColor: \"surface.dangerSubtle\",\n },\n },\n _checked: {\n color: \"text.onAction\",\n background: \"surface.action.selected\",\n borderColor: \"surface.action.selected\",\n outlineColor: \"icon.onAction\",\n _focus: {\n outlineOffset: \"-4px\",\n },\n _hover: {\n outlineOffset: \"-2px\",\n background: \"surface.actionSubtle.hover\",\n color: \"text.default\",\n borderColor: \"stroke.hover\",\n outlineColor: \"stroke.hover\",\n },\n },\n _invalid: {\n borderColor: \"stroke.error\",\n outlineColor: \"stroke.error\",\n background: \"surface.dangerSubtle\",\n outlineOffset: \"-2px\",\n _checked: {\n color: \"text.default\",\n borderColor: \"stroke.error\",\n outlineColor: \"stroke.error\",\n background: \"surface.dangerSubtle\",\n outlineOffset: \"-2px\",\n _hover: {\n borderColor: \"stroke.hover\",\n outlineColor: \"stroke.hover\",\n },\n },\n },\n _focus: {\n outlineStyle: \"solid\",\n outlineWidth: \"2px\",\n outlineOffset: \"-2px\",\n },\n },\n control: {\n display: \"none\",\n _checked: {\n display: \"flex\",\n color: \"text.onAction\",\n _hover: {\n color: \"stroke.hover\",\n },\n },\n _disabled: {\n color: \"stroke.disabled\",\n _hover: {\n color: \"stroke.disabled\",\n },\n },\n _invalid: {\n _checked: {\n color: \"stroke.error\",\n },\n },\n },\n },\n },\n },\n});\n\nconst { withProvider, withContext } = createStyleContext(checkboxRecipe);\n\nexport type CheckboxVariantProps = NonNullable<RecipeVariantProps<typeof checkboxRecipe>>;\n\nexport interface CheckboxRootProps extends StyledProps, HTMLArkProps<\"label\">, CheckboxVariantProps {}\n\nexport const CheckboxRoot = withProvider(Checkbox.Root, \"root\", { baseComponent: true });\n\nexport const CheckboxIndicator = withContext(Checkbox.Indicator, \"indicator\", { baseComponent: true });\n\nconst InternalCheckboxLabel = withContext(Checkbox.Label, \"label\");\n\ninterface CheckboxLabelProps\n extends StyledProps, Omit<Checkbox.LabelProps, \"color\">, TextProps, RefAttributes<HTMLSpanElement> {}\n\nexport const CheckboxLabel = ({ textStyle = \"label.medium\", children, ...props }: CheckboxLabelProps) => (\n <InternalCheckboxLabel {...props} asChild>\n <Text textStyle={textStyle}>{children}</Text>\n </InternalCheckboxLabel>\n);\n\nexport const CheckboxControl = withContext(Checkbox.Control, \"control\", { baseComponent: true });\n\nexport const CheckboxGroup = withProvider(Checkbox.Group, \"group\", { baseComponent: true });\n\nexport const CheckboxHiddenInput = Checkbox.HiddenInput;\n"],"mappings":";;;;;;;;;;;;;AA4NA,MAAM,EAAE,cAAc,iBAAA,GAAA,wBAAA,qBAAA,GAAA,wBAAA,KA7MK;CACzB,OAAOA,cAAAA,gBAAgB,MAAM;CAC7B,MAAM;EACJ,MAAM;GACJ,YAAY;GACZ,SAAS;GACT,YAAY;GACZ,OAAO;GACP,QAAQ;GACR,WAAW;IACT,OAAO;IACP,QAAQ;IACR,QAAQ,EACN,OAAO,iBACR;IACF;GACF;EACD,OAAO;GACL,SAAS;GACT,KAAK;GACL,eAAe;GAChB;EACD,SAAS;GACP,YAAY;GACZ,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,QAAQ;GACR,OAAO;GACP,QAAQ;GACR,OAAO;GACP,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,WAAW,EACT,QAAQ,eACT;GACD,eAAe;IACb,YAAY;IACZ,oBAAoB;IACrB;GACF;EACF;CACD,iBAAiB,EACf,SAAS,YACV;CACD,UAAU,EACR,SAAS;EACP,UAAU;GACR,MAAM;IACJ,KAAK;IACL,QAAQ,EACN,OAAO,eACR;IACD,eAAe;KACb,SAAS;KACT,eAAe;KACf,cAAc;KACd,cAAc;KACf;IACF;GACD,SAAS;IACP,QAAQ;IACR,aAAa;IACb,cAAc;IACd,YAAY;IACZ,QAAQ;KACN,WAAW;KACX,gBAAgB;KACjB;IACD,UAAU;KACR,iBAAiB;KACjB,aAAa;KACb,OAAO;KACR;IACD,WAAW;KACT,aAAa;KACb,QAAQ;MACN,aAAa;MACb,WAAW;MACZ;KACD,UAAU;MACR,YAAY;MACZ,aAAa;MACd;KACF;IACD,UAAU;KACR,aAAa;KACb,UAAU;MACR,OAAO;MACP,aAAa;MACb,iBAAiB;MAClB;KACF;IACF;GACF;EACD,MAAM;GACJ,MAAM;IACJ,OAAO;IACP,OAAO;IACP,KAAK;IACL,YAAY;IACZ,QAAQ;IACR,aAAa;IACb,cAAc;IACd,eAAe;IACf,cAAc;IACd,cAAc;IACd,WAAW;IACX,oBAAoB;IACpB,oBAAoB;IACpB,0BAA0B;IAC1B,WAAW;KACT,OAAO;KACP,aAAa;KACb,YAAY;KACZ,QAAQ;MACN,OAAO;MACP,aAAa;MACb,YAAY;MACb;KACD,UAAU;MACR,OAAO;MACP,aAAa;MACb,YAAY;MACZ,QAAQ;OACN,OAAO;OACP,aAAa;OACb,YAAY;OACb;MACF;KACF;IACD,QAAQ;KACN,YAAY;KACZ,aAAa;KACb,cAAc;KACd,UAAU,EACR,iBAAiB,wBAClB;KACF;IACD,UAAU;KACR,OAAO;KACP,YAAY;KACZ,aAAa;KACb,cAAc;KACd,QAAQ,EACN,eAAe,QAChB;KACD,QAAQ;MACN,eAAe;MACf,YAAY;MACZ,OAAO;MACP,aAAa;MACb,cAAc;MACf;KACF;IACD,UAAU;KACR,aAAa;KACb,cAAc;KACd,YAAY;KACZ,eAAe;KACf,UAAU;MACR,OAAO;MACP,aAAa;MACb,cAAc;MACd,YAAY;MACZ,eAAe;MACf,QAAQ;OACN,aAAa;OACb,cAAc;OACf;MACF;KACF;IACD,QAAQ;KACN,cAAc;KACd,cAAc;KACd,eAAe;KAChB;IACF;GACD,SAAS;IACP,SAAS;IACT,UAAU;KACR,SAAS;KACT,OAAO;KACP,QAAQ,EACN,OAAO,gBACR;KACF;IACD,WAAW;KACT,OAAO;KACP,QAAQ,EACN,OAAO,mBACR;KACF;IACD,UAAU,EACR,UAAU,EACR,OAAO,gBACR,EACF;IACF;GACF;EACF,EACF;CACF,CAAC,CAEsE;AAMxE,MAAa,eAAe,aAAaC,cAAAA,SAAS,MAAM,QAAQ,EAAE,eAAe,MAAM,CAAC;AAExF,MAAa,oBAAoB,YAAYA,cAAAA,SAAS,WAAW,aAAa,EAAE,eAAe,MAAM,CAAC;AAEtG,MAAM,wBAAwB,YAAYA,cAAAA,SAAS,OAAO,QAAQ;AAKlE,MAAa,iBAAiB,EAAE,YAAY,gBAAgB,UAAU,GAAG,YACvE,iBAAA,GAAA,kBAAA,KAAC,uBAAD;CAAuB,GAAI;CAAO,SAAA;WAChC,iBAAA,GAAA,kBAAA,KAACC,aAAAA,MAAD;EAAiB;EAAY;EAAgB,CAAA;CACvB,CAAA;AAG1B,MAAa,kBAAkB,YAAYD,cAAAA,SAAS,SAAS,WAAW,EAAE,eAAe,MAAM,CAAC;AAEhG,MAAa,gBAAgB,aAAaA,cAAAA,SAAS,OAAO,SAAS,EAAE,eAAe,MAAM,CAAC;AAE3F,MAAa,sBAAsBA,cAAAA,SAAS"}
1
+ {"version":3,"file":"Checkbox.js","names":["checkboxAnatomy","Checkbox","Text"],"sources":["../src/Checkbox.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Checkbox, checkboxAnatomy, type HTMLArkProps } from \"@ark-ui/react\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { RecipeVariantProps, StyledProps } from \"@ndla/styled-system/types\";\nimport type { RefAttributes } from \"react\";\nimport { Text, type TextProps } from \"./Text\";\n\nconst checkboxRecipe = sva({\n slots: checkboxAnatomy.keys(),\n base: {\n root: {\n userSelect: \"none\",\n display: \"flex\",\n alignItems: \"center\",\n width: \"fit-content\",\n cursor: \"pointer\",\n _disabled: {\n color: \"text.disabled\",\n cursor: \"not-allowed\",\n _hover: {\n color: \"text.disabled\",\n },\n },\n },\n group: {\n display: \"flex\",\n gap: \"xxsmall\",\n flexDirection: \"column\",\n },\n control: {\n flexShrink: \"0\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n cursor: \"pointer\",\n width: \"medium\",\n height: \"medium\",\n color: \"text.strong\",\n transitionDuration: \"normal\",\n transitionProperty: \"border-color, background, box-shadow, color\",\n transitionTimingFunction: \"default\",\n _disabled: {\n cursor: \"not-allowed\",\n },\n _motionReduce: {\n transition: \"none\",\n transitionDuration: \"0s\",\n },\n },\n },\n defaultVariants: {\n variant: \"checkbox\",\n },\n variants: {\n variant: {\n checkbox: {\n root: {\n gap: \"xxsmall\",\n _hover: {\n color: \"text.action\",\n },\n _focusVisible: {\n outline: \"2px solid\",\n outlineOffset: \"4xsmall\",\n outlineColor: \"stroke.default\",\n borderRadius: \"xsmall\",\n },\n },\n control: {\n border: \"2px solid\",\n borderColor: \"stroke.subtle\",\n borderRadius: \"xsmall\",\n background: \"surface.default\",\n _hover: {\n boxShadow: \"0 0 0 4px var(--shadow-color)\",\n boxShadowColor: \"surface.actionSubtle.hover.strong\",\n },\n _checked: {\n backgroundColor: \"surface.action\",\n borderColor: \"surface.action\",\n color: \"icon.onAction\",\n },\n _disabled: {\n borderColor: \"stroke.disabled\",\n _hover: {\n borderColor: \"stroke.disabled\",\n boxShadow: \"none\",\n },\n _checked: {\n background: \"surface.disabled\",\n borderColor: \"stroke.disabled\",\n },\n },\n _invalid: {\n borderColor: \"stroke.error\",\n _checked: {\n color: \"stroke.error\",\n borderColor: \"stroke.error\",\n backgroundColor: \"surface.default\",\n },\n },\n },\n },\n chip: {\n root: {\n width: \"fit-content\",\n color: \"text.default\",\n gap: \"4xsmall\",\n background: \"surface.actionSubtle\",\n border: \"1px solid\",\n borderColor: \"stroke.subtle\",\n outlineColor: \"stroke.subtle\",\n paddingInline: \"xsmall\",\n paddingBlock: \"4xsmall\",\n borderRadius: \"large\",\n minHeight: \"large\",\n transitionDuration: \"normal\",\n transitionProperty: \"border-color, background, box-shadow, color\",\n transitionTimingFunction: \"default\",\n _disabled: {\n color: \"text.disabled\",\n borderColor: \"stroke.disabled\",\n background: \"surface.disabled\",\n _hover: {\n color: \"text.disabled\",\n borderColor: \"stroke.disabled\",\n background: \"surface.disabled\",\n },\n _checked: {\n color: \"text.disabled\",\n borderColor: \"stroke.disabled\",\n background: \"surface.disabled\",\n _hover: {\n color: \"text.disabled\",\n borderColor: \"stroke.disabled\",\n background: \"surface.disabled\",\n },\n },\n },\n _hover: {\n background: \"surface.actionSubtle.hover\",\n borderColor: \"stroke.hover\",\n outlineColor: \"stroke.hover\",\n _invalid: {\n backgroundColor: \"surface.dangerSubtle\",\n },\n },\n _checked: {\n color: \"text.onAction\",\n background: \"surface.action.selected\",\n borderColor: \"surface.action.selected\",\n outlineColor: \"icon.onAction\",\n _focus: {\n outlineOffset: \"-4px\",\n },\n _hover: {\n outlineOffset: \"-2px\",\n background: \"surface.actionSubtle.hover\",\n color: \"text.default\",\n borderColor: \"stroke.hover\",\n outlineColor: \"stroke.hover\",\n },\n },\n _invalid: {\n borderColor: \"stroke.error\",\n outlineColor: \"stroke.error\",\n background: \"surface.dangerSubtle\",\n outlineOffset: \"-2px\",\n _checked: {\n color: \"text.default\",\n borderColor: \"stroke.error\",\n outlineColor: \"stroke.error\",\n background: \"surface.dangerSubtle\",\n outlineOffset: \"-2px\",\n _hover: {\n borderColor: \"stroke.hover\",\n outlineColor: \"stroke.hover\",\n },\n },\n },\n _focus: {\n outlineStyle: \"solid\",\n outlineWidth: \"2px\",\n outlineOffset: \"-2px\",\n },\n },\n control: {\n display: \"none\",\n _checked: {\n display: \"flex\",\n color: \"text.onAction\",\n _hover: {\n color: \"stroke.hover\",\n },\n },\n _disabled: {\n color: \"stroke.disabled\",\n _hover: {\n color: \"stroke.disabled\",\n },\n },\n _invalid: {\n _checked: {\n color: \"stroke.error\",\n },\n },\n },\n },\n },\n },\n});\n\nconst { withProvider, withContext } = createStyleContext(checkboxRecipe);\n\nexport type CheckboxVariantProps = NonNullable<RecipeVariantProps<typeof checkboxRecipe>>;\n\nexport interface CheckboxRootProps extends StyledProps, HTMLArkProps<\"label\">, CheckboxVariantProps {}\n\nexport const CheckboxRoot = withProvider(Checkbox.Root, \"root\", { baseComponent: true });\n\nexport const CheckboxIndicator = withContext(Checkbox.Indicator, \"indicator\", { baseComponent: true });\n\nconst InternalCheckboxLabel = withContext(Checkbox.Label, \"label\");\n\ninterface CheckboxLabelProps\n extends StyledProps, Omit<Checkbox.LabelProps, \"color\">, TextProps, RefAttributes<HTMLSpanElement> {}\n\nexport const CheckboxLabel = ({ textStyle = \"label.medium\", children, ...props }: CheckboxLabelProps) => (\n <InternalCheckboxLabel {...props} asChild>\n <Text textStyle={textStyle}>{children}</Text>\n </InternalCheckboxLabel>\n);\n\nexport const CheckboxControl = withContext(Checkbox.Control, \"control\", { baseComponent: true });\n\nexport const CheckboxGroup = withProvider(Checkbox.Group, \"group\", { baseComponent: true });\n\nexport const CheckboxHiddenInput = Checkbox.HiddenInput;\n"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"Combobox.js","names":["comboboxAnatomy","Combobox","Text","Label"],"sources":["../src/Combobox.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Combobox, comboboxAnatomy } from \"@ark-ui/react\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { RecipeVariantProps, StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef, type ElementType, type RefAttributes } from \"react\";\nimport { Label } from \"./Label\";\nimport { Text, type TextProps } from \"./Text\";\n\nconst comboboxRecipe = sva({\n slots: comboboxAnatomy.keys(),\n base: {\n root: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"3xsmall\",\n },\n control: {\n display: \"flex\",\n alignItems: \"center\",\n gap: \"4xsmall\",\n },\n content: {\n display: \"flex\",\n flexDirection: \"column\",\n zIndex: \"dropdown\",\n background: \"surface.default\",\n overflowY: \"auto\",\n maxHeight: \"min(token(spacing.surface.xsmall), 45vh)\",\n _open: {\n animation: \"fade-shift-in 0.25s ease-out\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n _closed: {\n animation: \"fade-shift-out 0.25s ease-out\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n },\n item: {\n display: \"flex\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n cursor: \"pointer\",\n transitionDuration: \"fast\",\n transitionProperty: \"background, color, border-color\",\n transitionTimingFunction: \"default\",\n background: \"surface.default\",\n _disabled: {\n cursor: \"not-allowed\",\n background: \"surface.disabled\",\n color: \"text.disabled\",\n _hover: {\n background: \"surface.disabled\",\n color: \"text.disabled\",\n },\n },\n _hover: {\n background: \"surface.hover\",\n },\n _highlighted: {\n background: \"surface.hover\",\n },\n _checked: {\n background: \"surface.selected\",\n _highlighted: {\n background: \"surface.hover\",\n },\n },\n },\n trigger: {\n \"& svg\": {\n color: \"icon.default\",\n transformOrigin: \"center\",\n transitionDuration: \"normal\",\n transitionProperty: \"transform\",\n transitionTimingFunction: \"default\",\n _motionReduce: {\n transition: \"none\",\n transitionDuration: \"0s\",\n },\n },\n _open: {\n \"& svg\": {\n transform: \"rotate(180deg)\",\n },\n },\n },\n itemIndicator: {\n color: \"stroke.default\",\n },\n itemText: {\n _checked: {\n textDecoration: \"underline\",\n },\n _highlighted: {\n textDecoration: \"underline\",\n },\n },\n itemGroup: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"4xsmall\",\n },\n },\n defaultVariants: {\n context: \"standalone\",\n variant: \"simple\",\n },\n variants: {\n context: {\n standalone: {\n content: {\n boxShadow: \"large\",\n borderRadius: \"xsmall\",\n padding: \"xsmall\",\n },\n },\n composite: {},\n },\n variant: {\n simple: {\n item: {\n padding: \"xsmall\",\n borderRadius: \"xsmall\",\n },\n content: {\n gap: \"4xsmall\",\n },\n },\n complex: {},\n },\n },\n});\n\nconst { withProvider, withContext } = createStyleContext(comboboxRecipe);\n\nexport type ComboboxVariantProps = NonNullable<RecipeVariantProps<typeof comboboxRecipe>>;\n\nexport interface ComboboxRootProps<T extends Combobox.CollectionItem>\n extends StyledProps, Combobox.RootProps<T>, ComboboxVariantProps, RefAttributes<HTMLDivElement> {\n translations: Combobox.RootProps<T>[\"translations\"];\n}\n\nconst InternalComboboxRoot = withProvider<ElementType<ComboboxRootProps<Combobox.CollectionItem>>>(\n Combobox.Root,\n \"root\",\n { baseComponent: true },\n);\n\nexport const ComboboxRoot = <T extends Combobox.CollectionItem>({\n lazyMount = true,\n unmountOnExit = true,\n ...props\n}: ComboboxRootProps<T>) => {\n return <InternalComboboxRoot lazyMount={lazyMount} unmountOnExit={unmountOnExit} {...props} />;\n};\n\nexport interface ComboboxClearTriggerProps extends Combobox.ClearTriggerProps, StyledProps {}\n\nexport const ComboboxClearTrigger = withContext(Combobox.ClearTrigger, \"clearTrigger\", { baseComponent: true });\n\nexport interface ComboboxContentProps extends Combobox.ContentProps, StyledProps {}\n\nexport const ComboboxContentStandalone = withContext(Combobox.Content, \"content\", { baseComponent: true });\n\nexport const ComboboxContent = forwardRef<HTMLDivElement, ComboboxContentProps>((props, ref) => (\n <ComboboxPositioner>\n <ComboboxContentStandalone ref={ref} {...props} />\n </ComboboxPositioner>\n));\n\nexport interface ComboboxControlProps extends Combobox.ControlProps, StyledProps {}\n\nexport const ComboboxControl = withContext(Combobox.Control, \"control\", { baseComponent: true });\n\nexport interface ComboboxInputProps extends Combobox.InputProps, StyledProps {}\n\nexport const ComboboxInput = withContext(Combobox.Input, \"input\", { baseComponent: true });\n\nconst InternalComboboxItemGroupLabel = withContext(Combobox.ItemGroupLabel, \"itemGroupLabel\");\n\nexport interface ComboboxItemGroupLabelProps\n extends Omit<Combobox.ItemGroupLabelProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLDivElement> {}\n\nexport const ComboboxItemGroupLabel = ({\n children,\n textStyle = \"label.small\",\n fontWeight = \"bold\",\n ...props\n}: ComboboxItemGroupLabelProps) => (\n <InternalComboboxItemGroupLabel asChild>\n <Text asChild consumeCss textStyle={textStyle} fontWeight={fontWeight} {...props}>\n <div>{children}</div>\n </Text>\n </InternalComboboxItemGroupLabel>\n);\n\nexport interface ComboboxItemGroupProps extends Combobox.ItemGroupProps, StyledProps {}\n\nexport const ComboboxItemGroup = withContext(Combobox.ItemGroup, \"itemGroup\", { baseComponent: true });\n\nexport interface ComboboxItemIndicatorProps extends Combobox.ItemIndicatorProps, StyledProps {}\n\nexport const ComboboxItemIndicator = withContext(Combobox.ItemIndicator, \"itemIndicator\", { baseComponent: true });\n\nexport interface ComboboxItemProps extends Combobox.ItemProps, StyledProps {}\n\nexport const ComboboxItem = withContext(Combobox.Item, \"item\", { baseComponent: true });\n\nconst InternalComboboxItemText = withContext(Combobox.ItemText, \"itemText\");\n\nexport interface ComboboxItemTextProps\n extends Omit<Combobox.ItemTextProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLDivElement> {}\n\nexport const ComboboxItemText = ({\n textStyle = \"label.medium\",\n fontWeight = \"bold\",\n children,\n ...props\n}: ComboboxItemTextProps) => (\n <InternalComboboxItemText asChild>\n <Text {...props} textStyle={textStyle} fontWeight={fontWeight} asChild consumeCss>\n <div>{children}</div>\n </Text>\n </InternalComboboxItemText>\n);\n\nconst InternalComboboxLabel = withContext(Combobox.Label, \"label\");\n\nexport interface ComboboxLabelProps\n extends Omit<Combobox.LabelProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLLabelElement> {}\n\nexport const ComboboxLabel = ({ textStyle = \"label.medium\", fontWeight = \"bold\", ...props }: ComboboxLabelProps) => (\n <InternalComboboxLabel asChild>\n <Label textStyle={textStyle} fontWeight={fontWeight} {...props} />\n </InternalComboboxLabel>\n);\n\nexport interface ComboboxPositionerProps extends Combobox.PositionerProps, StyledProps {}\n\nexport const ComboboxPositioner = withContext(Combobox.Positioner, \"positioner\", { baseComponent: true });\n\nexport interface ComboboxTriggerProps extends Combobox.TriggerProps, StyledProps {}\n\nexport const ComboboxTrigger = withContext(Combobox.Trigger, \"trigger\", { baseComponent: true });\n\nexport interface ComboboxListProps extends Combobox.ListProps, StyledProps {}\n\nexport const ComboboxList = withContext(Combobox.List, \"list\", { baseComponent: true });\n"],"mappings":"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"}
1
+ {"version":3,"file":"Combobox.js","names":["comboboxAnatomy","Combobox","Text","Label"],"sources":["../src/Combobox.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Combobox, comboboxAnatomy } from \"@ark-ui/react\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { RecipeVariantProps, StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef, type ElementType, type RefAttributes } from \"react\";\nimport { Label } from \"./Label\";\nimport { Text, type TextProps } from \"./Text\";\n\nconst comboboxRecipe = sva({\n slots: comboboxAnatomy.keys(),\n base: {\n root: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"3xsmall\",\n },\n control: {\n display: \"flex\",\n alignItems: \"center\",\n gap: \"4xsmall\",\n },\n content: {\n display: \"flex\",\n flexDirection: \"column\",\n zIndex: \"dropdown\",\n background: \"surface.default\",\n overflowY: \"auto\",\n maxHeight: \"min(token(spacing.surface.xsmall), 45vh)\",\n _open: {\n animation: \"fade-shift-in 0.25s ease-out\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n _closed: {\n animation: \"fade-shift-out 0.25s ease-out\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n },\n item: {\n display: \"flex\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n cursor: \"pointer\",\n transitionDuration: \"fast\",\n transitionProperty: \"background, color, border-color\",\n transitionTimingFunction: \"default\",\n background: \"surface.default\",\n _disabled: {\n cursor: \"not-allowed\",\n background: \"surface.disabled\",\n color: \"text.disabled\",\n _hover: {\n background: \"surface.disabled\",\n color: \"text.disabled\",\n },\n },\n _hover: {\n background: \"surface.hover\",\n },\n _highlighted: {\n background: \"surface.hover\",\n },\n _checked: {\n background: \"surface.selected\",\n _highlighted: {\n background: \"surface.hover\",\n },\n },\n },\n trigger: {\n \"& svg\": {\n color: \"icon.default\",\n transformOrigin: \"center\",\n transitionDuration: \"normal\",\n transitionProperty: \"transform\",\n transitionTimingFunction: \"default\",\n _motionReduce: {\n transition: \"none\",\n transitionDuration: \"0s\",\n },\n },\n _open: {\n \"& svg\": {\n transform: \"rotate(180deg)\",\n },\n },\n },\n itemIndicator: {\n color: \"stroke.default\",\n },\n itemText: {\n _checked: {\n textDecoration: \"underline\",\n },\n _highlighted: {\n textDecoration: \"underline\",\n },\n },\n itemGroup: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"4xsmall\",\n },\n },\n defaultVariants: {\n context: \"standalone\",\n variant: \"simple\",\n },\n variants: {\n context: {\n standalone: {\n content: {\n boxShadow: \"large\",\n borderRadius: \"xsmall\",\n padding: \"xsmall\",\n },\n },\n composite: {},\n },\n variant: {\n simple: {\n item: {\n padding: \"xsmall\",\n borderRadius: \"xsmall\",\n },\n content: {\n gap: \"4xsmall\",\n },\n },\n complex: {},\n },\n },\n});\n\nconst { withProvider, withContext } = createStyleContext(comboboxRecipe);\n\nexport type ComboboxVariantProps = NonNullable<RecipeVariantProps<typeof comboboxRecipe>>;\n\nexport interface ComboboxRootProps<T extends Combobox.CollectionItem>\n extends StyledProps, Combobox.RootProps<T>, ComboboxVariantProps, RefAttributes<HTMLDivElement> {\n translations: Combobox.RootProps<T>[\"translations\"];\n}\n\nconst InternalComboboxRoot = withProvider<ElementType<ComboboxRootProps<Combobox.CollectionItem>>>(\n Combobox.Root,\n \"root\",\n { baseComponent: true },\n);\n\nexport const ComboboxRoot = <T extends Combobox.CollectionItem>({\n lazyMount = true,\n unmountOnExit = true,\n ...props\n}: ComboboxRootProps<T>) => {\n return <InternalComboboxRoot lazyMount={lazyMount} unmountOnExit={unmountOnExit} {...props} />;\n};\n\nexport interface ComboboxClearTriggerProps extends Combobox.ClearTriggerProps, StyledProps {}\n\nexport const ComboboxClearTrigger = withContext(Combobox.ClearTrigger, \"clearTrigger\", { baseComponent: true });\n\nexport interface ComboboxContentProps extends Combobox.ContentProps, StyledProps {}\n\nexport const ComboboxContentStandalone = withContext(Combobox.Content, \"content\", { baseComponent: true });\n\nexport const ComboboxContent = forwardRef<HTMLDivElement, ComboboxContentProps>((props, ref) => (\n <ComboboxPositioner>\n <ComboboxContentStandalone ref={ref} {...props} />\n </ComboboxPositioner>\n));\n\nexport interface ComboboxControlProps extends Combobox.ControlProps, StyledProps {}\n\nexport const ComboboxControl = withContext(Combobox.Control, \"control\", { baseComponent: true });\n\nexport interface ComboboxInputProps extends Combobox.InputProps, StyledProps {}\n\nexport const ComboboxInput = withContext(Combobox.Input, \"input\", { baseComponent: true });\n\nconst InternalComboboxItemGroupLabel = withContext(Combobox.ItemGroupLabel, \"itemGroupLabel\");\n\nexport interface ComboboxItemGroupLabelProps\n extends Omit<Combobox.ItemGroupLabelProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLDivElement> {}\n\nexport const ComboboxItemGroupLabel = ({\n children,\n textStyle = \"label.small\",\n fontWeight = \"bold\",\n ...props\n}: ComboboxItemGroupLabelProps) => (\n <InternalComboboxItemGroupLabel asChild>\n <Text asChild consumeCss textStyle={textStyle} fontWeight={fontWeight} {...props}>\n <div>{children}</div>\n </Text>\n </InternalComboboxItemGroupLabel>\n);\n\nexport interface ComboboxItemGroupProps extends Combobox.ItemGroupProps, StyledProps {}\n\nexport const ComboboxItemGroup = withContext(Combobox.ItemGroup, \"itemGroup\", { baseComponent: true });\n\nexport interface ComboboxItemIndicatorProps extends Combobox.ItemIndicatorProps, StyledProps {}\n\nexport const ComboboxItemIndicator = withContext(Combobox.ItemIndicator, \"itemIndicator\", { baseComponent: true });\n\nexport interface ComboboxItemProps extends Combobox.ItemProps, StyledProps {}\n\nexport const ComboboxItem = withContext(Combobox.Item, \"item\", { baseComponent: true });\n\nconst InternalComboboxItemText = withContext(Combobox.ItemText, \"itemText\");\n\nexport interface ComboboxItemTextProps\n extends Omit<Combobox.ItemTextProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLDivElement> {}\n\nexport const ComboboxItemText = ({\n textStyle = \"label.medium\",\n fontWeight = \"bold\",\n children,\n ...props\n}: ComboboxItemTextProps) => (\n <InternalComboboxItemText asChild>\n <Text {...props} textStyle={textStyle} fontWeight={fontWeight} asChild consumeCss>\n <div>{children}</div>\n </Text>\n </InternalComboboxItemText>\n);\n\nconst InternalComboboxLabel = withContext(Combobox.Label, \"label\");\n\nexport interface ComboboxLabelProps\n extends Omit<Combobox.LabelProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLLabelElement> {}\n\nexport const ComboboxLabel = ({ textStyle = \"label.medium\", fontWeight = \"bold\", ...props }: ComboboxLabelProps) => (\n <InternalComboboxLabel asChild>\n <Label textStyle={textStyle} fontWeight={fontWeight} {...props} />\n </InternalComboboxLabel>\n);\n\nexport interface ComboboxPositionerProps extends Combobox.PositionerProps, StyledProps {}\n\nexport const ComboboxPositioner = withContext(Combobox.Positioner, \"positioner\", { baseComponent: true });\n\nexport interface ComboboxTriggerProps extends Combobox.TriggerProps, StyledProps {}\n\nexport const ComboboxTrigger = withContext(Combobox.Trigger, \"trigger\", { baseComponent: true });\n\nexport interface ComboboxListProps extends Combobox.ListProps, StyledProps {}\n\nexport const ComboboxList = withContext(Combobox.List, \"list\", { baseComponent: true });\n"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"DatePicker.js","names":["datePickerAnatomy","DatePicker","Label"],"sources":["../src/DatePicker.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { DatePicker, datePickerAnatomy } from \"@ark-ui/react\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext, type StyledProps } from \"@ndla/styled-system/jsx\";\nimport { forwardRef, type RefAttributes } from \"react\";\nimport { Label } from \"./Label\";\nimport type { TextProps } from \"./Text\";\n\nconst datePickerRecipe = sva({\n slots: datePickerAnatomy.keys(),\n base: {\n root: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"xsmall\",\n },\n content: {\n background: \"surface.default\",\n borderRadius: \"xsmall\",\n boxShadow: \"large\",\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"xsmall\",\n padding: \"xsmall\",\n zIndex: \"dropdown\",\n _open: {\n animation: \"fade-shift-in 0.25s ease-in-out\",\n },\n _closed: {\n animation: \"fade-shift-out 0.25s ease-in-out\",\n },\n },\n control: {\n display: \"flex\",\n width: \"fit-content\",\n gap: \"xsmall\",\n },\n label: {},\n tableHeader: {},\n viewControl: {\n display: \"flex\",\n gap: \"5xsmall\",\n justifyContent: \"space-between\",\n },\n table: {\n width: \"100%\",\n borderCollapse: \"separate\",\n borderSpacing: \"5xsmall\",\n margin: \"-5xsmall\",\n },\n tableCell: {\n textAlign: \"center\",\n },\n tableCellTrigger: {\n width: \"100%\",\n \"&[data-today]\": {\n _before: {\n content: \"'-'\",\n color: \"stroke.default\",\n position: \"absolute\",\n marginBlockStart: \"medium\",\n },\n },\n \"&[data-outside-range]\": {\n color: \"text.subtle\",\n fontWeight: \"normal\",\n },\n },\n view: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"xsmall\",\n },\n },\n});\nconst { withProvider, withContext } = createStyleContext(datePickerRecipe);\n\nexport interface DatePickerRootProps extends DatePicker.RootProps, StyledProps {\n translations: DatePicker.RootProps[\"translations\"];\n locale: DatePicker.RootProps[\"locale\"];\n}\n\nexport const DatePickerRoot = withProvider(DatePicker.Root, \"root\", { baseComponent: true });\n\nexport const DatePickerClearTrigger = withContext(DatePicker.ClearTrigger, \"clearTrigger\", {\n baseComponent: true,\n});\n\ninterface DatePickerContentProps extends DatePicker.ContentProps, StyledProps {}\n\nexport const DatePickerContent = forwardRef<HTMLDivElement, DatePickerContentProps>((props, ref) => (\n <DatePickerPositioner>\n <DatePickerStandaloneContent {...props} ref={ref} />\n </DatePickerPositioner>\n));\n\nexport const DatePickerStandaloneContent = withContext(DatePicker.Content, \"content\", { baseComponent: true });\n\nexport const DatePickerControl = withContext(DatePicker.Control, \"control\", { baseComponent: true });\n\nexport const DatePickerInput = withContext(DatePicker.Input, \"input\", { baseComponent: true });\n\ninterface DatePickerLabelProps\n extends Omit<DatePicker.LabelProps, \"color\">, StyledProps, TextProps, RefAttributes<HTMLLabelElement> {}\n\nconst InternalDatePickerLabel = withContext(DatePicker.Label, \"label\");\n\nexport const DatePickerLabel = ({\n textStyle = \"label.medium\",\n fontWeight = \"bold\",\n ...props\n}: DatePickerLabelProps) => (\n <InternalDatePickerLabel asChild>\n <Label textStyle={textStyle} fontWeight={fontWeight} {...props} />\n </InternalDatePickerLabel>\n);\n\nexport const DatePickerMonthSelect = withContext(DatePicker.MonthSelect, \"monthSelect\", { baseComponent: true });\n\ninterface DatePickerNextTrigger extends DatePicker.NextTriggerProps, StyledProps {}\n\nexport const DatePickerNextTrigger = withContext(DatePicker.NextTrigger, \"nextTrigger\", { baseComponent: true });\n\nexport const DatePickerPositioner = withContext(DatePicker.Positioner, \"positioner\", { baseComponent: true });\n\nexport const DatePickerPresetTrigger = withContext(DatePicker.PresetTrigger, \"presetTrigger\", { baseComponent: true });\n\nexport const DatePickerPrevTrigger = withContext(DatePicker.PrevTrigger, \"prevTrigger\", { baseComponent: true });\n\nexport const DatePickerRangeText = withContext(DatePicker.RangeText, \"rangeText\", { baseComponent: true });\n\nexport const DatePickerTableBody = withContext(DatePicker.TableBody, \"tableBody\", { baseComponent: true });\n\nexport const DatePickerTableCell = withContext(DatePicker.TableCell, \"tableCell\", { baseComponent: true });\n\nexport const DatePickerTableCellTrigger = withContext(DatePicker.TableCellTrigger, \"tableCellTrigger\", {\n baseComponent: true,\n});\n\nexport const DatePickerTableHead = withContext(DatePicker.TableHead, \"tableHead\", { baseComponent: true });\n\nexport const DatePickerTableHeader = withContext(DatePicker.TableHeader, \"tableHeader\", { baseComponent: true });\n\nexport const DatePickerTable = withContext(DatePicker.Table, \"table\", { baseComponent: true });\n\nexport const DatePickerTableRow = withContext(DatePicker.TableRow, \"tableRow\", { baseComponent: true });\n\nexport const DatePickerTrigger = withContext(DatePicker.Trigger, \"trigger\", { baseComponent: true });\n\nexport const DatePickerViewControl = withContext(DatePicker.ViewControl, \"viewControl\", { baseComponent: true });\n\nexport const DatePickerView = withContext(DatePicker.View, \"view\", { baseComponent: true });\n\nexport const DatePickerViewTrigger = withContext(DatePicker.ViewTrigger, \"viewTrigger\", { baseComponent: true });\n\nexport const DatePickerYearSelect = withContext(DatePicker.YearSelect, \"yearSelect\", { baseComponent: true });\n\nexport { DatePickerContext } from \"@ark-ui/react\";\n"],"mappings":"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"}
1
+ {"version":3,"file":"DatePicker.js","names":["datePickerAnatomy","DatePicker","Label"],"sources":["../src/DatePicker.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { DatePicker, datePickerAnatomy } from \"@ark-ui/react\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext, type StyledProps } from \"@ndla/styled-system/jsx\";\nimport { forwardRef, type RefAttributes } from \"react\";\nimport { Label } from \"./Label\";\nimport type { TextProps } from \"./Text\";\n\nconst datePickerRecipe = sva({\n slots: datePickerAnatomy.keys(),\n base: {\n root: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"xsmall\",\n },\n content: {\n background: \"surface.default\",\n borderRadius: \"xsmall\",\n boxShadow: \"large\",\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"xsmall\",\n padding: \"xsmall\",\n zIndex: \"dropdown\",\n _open: {\n animation: \"fade-shift-in 0.25s ease-in-out\",\n },\n _closed: {\n animation: \"fade-shift-out 0.25s ease-in-out\",\n },\n },\n control: {\n display: \"flex\",\n width: \"fit-content\",\n gap: \"xsmall\",\n },\n label: {},\n tableHeader: {},\n viewControl: {\n display: \"flex\",\n gap: \"5xsmall\",\n justifyContent: \"space-between\",\n },\n table: {\n width: \"100%\",\n borderCollapse: \"separate\",\n borderSpacing: \"5xsmall\",\n margin: \"-5xsmall\",\n },\n tableCell: {\n textAlign: \"center\",\n },\n tableCellTrigger: {\n width: \"100%\",\n \"&[data-today]\": {\n _before: {\n content: \"'-'\",\n color: \"stroke.default\",\n position: \"absolute\",\n marginBlockStart: \"medium\",\n },\n },\n \"&[data-outside-range]\": {\n color: \"text.subtle\",\n fontWeight: \"normal\",\n },\n },\n view: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"xsmall\",\n },\n },\n});\nconst { withProvider, withContext } = createStyleContext(datePickerRecipe);\n\nexport interface DatePickerRootProps extends DatePicker.RootProps, StyledProps {\n translations: DatePicker.RootProps[\"translations\"];\n locale: DatePicker.RootProps[\"locale\"];\n}\n\nexport const DatePickerRoot = withProvider(DatePicker.Root, \"root\", { baseComponent: true });\n\nexport const DatePickerClearTrigger = withContext(DatePicker.ClearTrigger, \"clearTrigger\", {\n baseComponent: true,\n});\n\ninterface DatePickerContentProps extends DatePicker.ContentProps, StyledProps {}\n\nexport const DatePickerContent = forwardRef<HTMLDivElement, DatePickerContentProps>((props, ref) => (\n <DatePickerPositioner>\n <DatePickerStandaloneContent {...props} ref={ref} />\n </DatePickerPositioner>\n));\n\nexport const DatePickerStandaloneContent = withContext(DatePicker.Content, \"content\", { baseComponent: true });\n\nexport const DatePickerControl = withContext(DatePicker.Control, \"control\", { baseComponent: true });\n\nexport const DatePickerInput = withContext(DatePicker.Input, \"input\", { baseComponent: true });\n\ninterface DatePickerLabelProps\n extends Omit<DatePicker.LabelProps, \"color\">, StyledProps, TextProps, RefAttributes<HTMLLabelElement> {}\n\nconst InternalDatePickerLabel = withContext(DatePicker.Label, \"label\");\n\nexport const DatePickerLabel = ({\n textStyle = \"label.medium\",\n fontWeight = \"bold\",\n ...props\n}: DatePickerLabelProps) => (\n <InternalDatePickerLabel asChild>\n <Label textStyle={textStyle} fontWeight={fontWeight} {...props} />\n </InternalDatePickerLabel>\n);\n\nexport const DatePickerMonthSelect = withContext(DatePicker.MonthSelect, \"monthSelect\", { baseComponent: true });\n\ninterface DatePickerNextTrigger extends DatePicker.NextTriggerProps, StyledProps {}\n\nexport const DatePickerNextTrigger = withContext(DatePicker.NextTrigger, \"nextTrigger\", { baseComponent: true });\n\nexport const DatePickerPositioner = withContext(DatePicker.Positioner, \"positioner\", { baseComponent: true });\n\nexport const DatePickerPresetTrigger = withContext(DatePicker.PresetTrigger, \"presetTrigger\", { baseComponent: true });\n\nexport const DatePickerPrevTrigger = withContext(DatePicker.PrevTrigger, \"prevTrigger\", { baseComponent: true });\n\nexport const DatePickerRangeText = withContext(DatePicker.RangeText, \"rangeText\", { baseComponent: true });\n\nexport const DatePickerTableBody = withContext(DatePicker.TableBody, \"tableBody\", { baseComponent: true });\n\nexport const DatePickerTableCell = withContext(DatePicker.TableCell, \"tableCell\", { baseComponent: true });\n\nexport const DatePickerTableCellTrigger = withContext(DatePicker.TableCellTrigger, \"tableCellTrigger\", {\n baseComponent: true,\n});\n\nexport const DatePickerTableHead = withContext(DatePicker.TableHead, \"tableHead\", { baseComponent: true });\n\nexport const DatePickerTableHeader = withContext(DatePicker.TableHeader, \"tableHeader\", { baseComponent: true });\n\nexport const DatePickerTable = withContext(DatePicker.Table, \"table\", { baseComponent: true });\n\nexport const DatePickerTableRow = withContext(DatePicker.TableRow, \"tableRow\", { baseComponent: true });\n\nexport const DatePickerTrigger = withContext(DatePicker.Trigger, \"trigger\", { baseComponent: true });\n\nexport const DatePickerViewControl = withContext(DatePicker.ViewControl, \"viewControl\", { baseComponent: true });\n\nexport const DatePickerView = withContext(DatePicker.View, \"view\", { baseComponent: true });\n\nexport const DatePickerViewTrigger = withContext(DatePicker.ViewTrigger, \"viewTrigger\", { baseComponent: true });\n\nexport const DatePickerYearSelect = withContext(DatePicker.YearSelect, \"yearSelect\", { baseComponent: true });\n\nexport { DatePickerContext } from \"@ark-ui/react\";\n"],"mappings":"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"}